本文共 2477 字，大约阅读时间需要 8 分钟。

Ajax ( asynchronous javascript and xml(json) ) 是一种在无需加载整个网页的情况下能够更新部分网页的技术。

• 原理：Ajax 是 JavaScript 基于 XMLHttpRequest 对象与服务端进行交互，向服务端发送一个请求，并且获取和处理服务器返回的内容。

XHR对象和web服务器进行数据的异步交换

一、创建XHR对象(Ajax对象)

var xhr= new XMLHttpRequest();//IE5,IE6 不支持

兼容性写法：

var request = null;if(window.XMLHttpRequest){
   	request = new XMLHttpRequest();}else{
   	request = new ActiveXObject('Microsoft.XMLHTTP');// IE5 ， IE6}

二、XHR对象发送HTTP请求

xhr.open(method,url,async) // 建立http连接,使用method方式向url同步/异步请求数据

• method：get | post 不区分大小写；
• url：文件路径/文件名(服务器地址)
  当为 文件路径/文件名/?属性名=属性值&属性名=属性值 时，传递数据 ，需要后台接收
• async： true 异步请求（默认） | false 同步请求

在发送请求之前可以设置请求头信息

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

xhr.send(string) // 将请求发送到服务器上

• string:请求参数对象。GET请求：可以不写参数或null;POST请求需需要携带请求体

xhr.abort();// 中止请求  调用这个方法以后，readyState属性变为4，status属性变为0

withCredenticals ：表示跨域请求时，用户信息（比如 Cookie 和认证的 HTTP 头信息）是否会包含在请求之中，默认为false。

客户端设置请求头允许携带cookie：xhr.withCredenticals = true;服务端必须显示返回：Access-Control-Allow-Credentials: true

三、XHR获取服务器的响应

属性

• responseText：获得字符串形式的响应数据

• responseXML：获得XML形式的响应数据

• status 和statusText:以数字和文本形式返回HTTP状态码

• getAllResponseHeader():获取所有的响应报头

• getResponseHeader():查询响应中的某个字段的值

• readyState属性，指通信状态，属性值的变化代表服务器响应的变化

  0：请求未初始化，open还没有调用
  1：服务器连接已建立，已调用send()，正在发送请求
  2：请求已接收，send()方法执行完成，已经接受到全部响应内容
  3：请求处理中，正在解析响应内容
  4：请求已完成，响应内容解析完成

• status属性
  200, OK，访问正常
  301, Moved Permanently，永久移动
  302, Moved temporarily，暂时移动
  304, Not Modified，未修改
  307, Temporary Redirect，暂时重定向
  401, Unauthorized，未授权
  403, Forbidden，禁止访问
  404, Not Found，未发现指定网址
  500, Internal Server Error，服务器发生错误

事件

• onreadystatechange事件监听xhr对象上的readyState属性的变化，即监听服务器的响应
• onabort事件：请求中止
• onerror事件：请求失败
• onload 事件：请求成功完成
• ontimeout事件：请求超时

request.onreadystatechange = function(){
   	if(request.readyState === 4 && request.status === 200){
   	//响应完成且请求成功		request.responseText //获取服务器响应的内容	}}

手写一个Ajax，不依赖第三方库

var xhr = new XMLHttpRequest();xhr.open("GET","/api",false);// true 异步 ； false 同步//状态码改变触发 readystatechange事件xhr.onreadystatechange = function(){
   	if(xhr.readyState == 4){
   		if(xhr.status == 200){
   		//当状态为4并且状态码为200时 成功。			alert(xhr.responseText);		}	}}xhr.send(null);

IE兼容问题：IE低版本使用ActiveXObject,和W3C标准不同

jQuery实现Ajax

jQuery.ajax({
   	type:GET(默认) | post,	//在jQuery1.9以后的版本中使用ajax时，可以使用method替换type属性	url:''//请求地址，	data:{
   key:value} ,//请求参数	dataType:'json',//预期服务器返回的数据类型。如果不指定jQuery将自动根据HTTP包MIME信息来智能帕努单，一般采用json格式。	success:(res)=>{
   },	error:(jqXHR)=>{
   }//第一个参数为jQuery的XHR对象})

Ajax 之旅就结束啦，文中若有错误请及时指出并联系，不胜感激！

转载地址：https://blog.csdn.net/Conradine_Lian/article/details/107222510 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！