AJAX通信

简介

AJAX（Asynchronous JavaScript and XML，即异步JavaScript和XML），是一种用于创建快速动态网页的技术，可以对网页的部分进行刷新，而传统网页需要重新加载整个页面。 AJAX应用程序的优势在于： （1）通过异步模式，提升了用户体验； （2）优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用； （3）AJAX引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

AJAX 工作原理

在浏览器界面触发事件，然后创建一个XMLHttpRequest对象，将XMLHttpRequest对象发送给服务端服务端处理XMLHttpRequest对象，并将数据回传给浏览器浏览器使用JavaScript处理回传的数据，局部更新页面 ¹

XMLHttpRequest 对象

流程图：

创建 XMLHttpRequest 对象：variable=new XMLHttpRequest();创建HTTP请求：open(method,URL[,asyncFlag[,“userName” [, “password”]]]) method：HTTP请求方法URL：请求的URL地址，可以为网址或本地文件asyncFlag：布尔型，指定此请求是否为异步方式，默认为true（异步）userName，password：是指服务器验证需要的用户名和密码，可省略 设置状态改变时的事件：XMLHttpRequest对象有个属性readyState，它有5个值，分别对应了5个状态： 未初始化，对象已创建，但还未使用open方法正在加载，还未使用send方法已加载，send方法已使用，但当前的状态未知交互中，接收了部分数据完成，数据接收完毕 发送HTTP请求：XMLHttpRequest对象的 send() 方法负责发送HTTP请求 若请求中不包含请求正文：xhr.send(null);若请求包含正文：xhr.send(“a=2&b=3”);仅用于POST请求 获取异步返回的数据：XMLHttpRequest对象在数据接收完成后，需要使用status或statusText属性，来判断请求是否成功，status和statusText属性返回当前请求的响应状态代码和状态描述 例： function loadXMLDoc() { //创建XMLHttpRequest对象 var xmlhttp=new XMLHttpRequest(); //readyState属性值改变时触发该函数 xmlhttp.onreadystatechange=function() { //readyState状态码为4，表明服务器已响应 //status为200，表明请求成功 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //处理返回的数据responseText document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } //创建HTTP请求 xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); //发送HTTP请求 xmlhttp.send(); }

FormData对象

创建FormData对象的两种方式: var formData=new FormData(); formData.append(key,value); key:value是键值对var oform=document.getElementById(“myForm”); var formdata=new FormData(oform); 发送FormData数据：xmlhttp.send(formdata)解析XML数据： 当使用XMLHttpRequest请求数据，返回的是XML格式时，就需要用到它的另一个属性responseXML，这个属性代表一个XML DOM对象，可以专门用来解析XML格式数据，这个XML DOM对象提供了个getElementsByTagName方法（和HTML DOM的方法一样），可以根据标签名来得到数据 var bookname=xhr.responseXML.getElementsByTagName("title")[0].childNodes[0].nodeValue;

jQuery中的AJAX方法

get方法:$.get(URL [,data] [,function(data,status,xhr)] [,dataType])post方法:$(selector).post(URL [,data] [,function(data,status,xhr)] [,dataType]) ² get方法获取json数据:$(selector).getJSON(url,data,success(data,status,xhr)) success(data,status,xhr):当请求成功时运行的函数。底层方法:$.ajax({name:value, name:value, … })

---

https://www.runoob.com/ajax/ajax-intro.html ↩︎

https://www.runoob.com/jquery/ajax-get.html ↩︎