关于原生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 的状态信息

(六)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() {
        //请求出错处理
    }
})

关于原生AJAX

原文：https://www.cnblogs.com/zengbin13/p/12905303.html