Ajax简介

2021-03-20 22:30:48 阅读：161 来源： 互联网

标签：异步 XMLHttpRequest 请求 xhr 简介 send 响应 Ajax

什么是Ajax

什么是Ajax，通常用八字来表示它的核心：异步加载，局部刷新。Ajax就是为了实现在不重新加载整个网页的情况下，只对网页的某一部分进行局部的更新。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。

1.异步（Asynchronous）

了解Ajax前，我们要先了解什么是异步。异步的底层原理是单线程加事件队列，js的代码执行时单线程的，所谓单线程：就是js代码时从上到下按顺序依次执行的，一次只能做一件事情也就是所谓的同步。而事件队列可以看作一个容器，这个容器存储着js的回调函数，只有js代码执行结束后，才会去事件队列中调用这些回调函数这就是异步。而我们的Ajax，是通过使用XMLHttpRequest对象与Web服务器进行异步数据通信。

2.XMLHttpRequest

XMLHttpRequest 是浏览器内建对象，用于在后台与服务器通信（交换数据），由此我们便可实现对网页的部分更新，而不是刷新整个页面。兼容性：在IE6以前不是用XMLHttpRequest创建的，使用ActiveXObject对象来创建的。

3.请求

ajax中有两种请求方式，GET和POST两种请求

3.1 GET请求

代码如下

var xhr = new XMLHttpRequest();

//设置请求行 open (请求方法, 请求url)
	//get请求如果有参数就需要在url后面拼接参数
	//post请求在请求体中传递
xhr.open('get', 'index.php?'+name);

//设置请求头 setRequestHeader('key', 'value')
	//get方式不需要设置请求头
	//post需要设置 Content-Type: application/x-www-form-urlencoded
//设置 请求体: 发送请求  send(参数: key=value&key=value)
	//如果有参数,post应该在这个位置来传递参数
	//对于get请求不需要再这个位置来传递参数
xhr.send(null);

3.2 POST请求

  //1.让异步对象发送post请求
  //1.11创建异步对象
  var xhr = new XMLHttpRequest();
  //1.2设置请求行 open(请求方式, 请求url)
  	//1.get 需要在url后面拼接参数
 	//2.post 不需要拼接参数
  xhr.open("post","001.php?"+name)
  //1.3设置请求头: setRequestHeader()
 	 //1.get不需要设置
   	 //2.posr需要设置 Content-Type: application/x-www-form-urlencoded
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  //1.4设置请求体 send()
  	//1.get的参数在url中拼接了,所以不需要在这个中设置
  	//2.post的参数在这个函数张设置
  xhr.send('name=itcast&age=10');

4.响应

HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。
HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。
由于服务器做出响应需要时间，所以我们需要监听服务器响应的状态，然后才能进行处理。
onreadystatechange 是 Javascript 的事件的一种，其意义在于监听 XMLHttpRequest 的状态，一般监听readstate和status
readstate 属性有五个状态：
xhr.readyState = 0时，（未初始化）还没有调用send()方法
xhr.readyState = 1时，（载入）已调用send()方法，正在发送请求
xhr.readyState = 2时，（载入完成）send()方法执行完成，已经接收到全部响应内容
xhr.readyState = 3时，（交互）正在解析响应内容
xhr.readyState = 4时，（完成）响应内容解析完成，可以在客户端调用了
xhr.status表示响应码，如200
xhr.statusText表示响应信息，如OK
检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML
代码如下

//响应报文:
//报文行: 响应状态码 响应状态信息 200 ok
//报文头: 服务器返回给客户端的一些额外的信息
//报文体: 服务器返回给客户端的数据 responseText: 普通字符串 responseXML: 符合xml格式的字符串
//xhr.status可以获取当前服务器的响应状态
//一个真正的响应应该两个方面: 1.服务器成功响应 2.数据已经回到客户端并且可以使用了
//监听异步对象响应状态 readystate
xhr.onreadystatechange = funciton () {
  if(xhr.readyState == 4 && xhr.status == 200) {
   	//responseText或responseXML;
  }
}

标签：异步,XMLHttpRequest,请求,xhr,简介,send,响应,Ajax
来源： https://blog.csdn.net/Azhongpu/article/details/114678482

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9