关于原生AJAX

一、原生AJAX基础知识

(一)描述

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
• 通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新——在不重新加载整个网页的情况下，对网页的某部分进行更新

(二)工作原理

(三)浏览器发送请求

GET请求

xhr.open("GET", "data/a.text", true)
xhr.send()

• open(method,url,async)
  • 规定请求的类型、URL 以及是否异步处理请求
  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
• send(string)
  • 将请求发送到服务器
  • string：仅用于 POST 请求

POST请求——修改请求头

xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("content-type","application/x-www-urlencoded");
xhr.send("fname=Henry&lname=Ford")

• setRequestHeader(header,value)
  • 向请求添加 HTTP 头
  • header: 规定头的名称
  • value: 规定头的值

异步

• XMLHttpRequest 对象使用 AJAX，open() 方法的 async 参数必须设置为 true
• 通过 AJAX，JavaScript 无需等待服务器的响应
  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理
• 使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

(四)服务器创建响应

1. 获取服务器数据响应使用XMLHttpRequest对象的responeseText和responseXML属性
   • responseText——获得字符串形式的响应数据
   • responseXML——获得 XML 形式的响应数据，作为 XML 对象进行解析

(五)浏览器处理响应

onreadyStateChange事件

1. 处理服务器响应，需要先监听请求的状态，当响应准备就绪开始处理
2. 每当 readyState 改变时，就会触发 onreadystatechange 事件
3. readyState 属性存有 XMLHttpRequest 的状态信息

属性	描述
onreadyStateChange	存储函数，每当readyState属性改变，调用该函数
readyState	存有 XMLHttpRequest 的状态 0：请求未初始化——未调用open() 1：请求连接已经建立——未调用send() 2：请求已发送 3：请求处理中 4：请求已完成，响应准备就绪
status	200: "OK" 404: "Not Found"

(六)AJAX原生JS操作

//1.创建Ajax实例
let xhr = new XMLHttpRequest();	//IE下为ActiveObject对象
//2.设置请求配置
xhr.open("GET", "data/a.text", true)
//3.事件监听:通过监听readyStateChange事件，获知AJAX状态改变 
xhr.onreadyStateChange = function() {
    //请求完成 获取服务器返回的响应头响应主体
    if(xhr.readyState == 4 && xhr.status == 200 ) {
       console.log(xhr.responseText)
    }
}
//4.发送Ajax请求
xhr.send()

1. 创建 XMLHttpRequest 对象——let xhr = new XMLHttpRequest()
2. 规定请求的类型、URL与异步——xhr.open("GET", url, true)
3. 当服务器响应就绪时执行函数——xhr.onreadyStateChange = callback
4. 发送请求到服务器——xhr.send()

二、jQuery.ajax

$.ajax(url, [settings])

(一)描述

• 通过 HTTP 请求加载远程数据
• $.ajax() 返回其创建的 XMLHttpRequest 对象

$.ajax({
    type: "GET",		//请求类型
    url:"test.html",	//发送请求的地址
    data: "",			//发送到服务器的数据。将自动转换为请求字符串格式	
    dataType: "html",	//预期服务器返回的数据类型
    async: true,		//请求是否异步，默认为异步
    headers: {},		//设置消息头中的值
    timeout: "",		//设置请求超时时间（毫秒）
    beforeSend: function(XMLHttpRequest) {
        //请求前的处理——可修改XMLHttpRequest对象,如自定义请求头
    },
    success: function(data, status) {
        //请求成功时处理
    },
    complete: function(XMLHttpRequest, status) {
        //请求完成的处理
    },
    error: function() {
        //请求出错处理
    }
})