AJAX
1、 什么是AJAX？
Asynchronous Javascript And XML：异步的JS和XML/JSON,由Google2002年在GoogleSuggest应用提出。
主要原理是利用浏览器底层提供的XMLHttpRequest对象，向服务器发起异步请求，并接收响应消息，
目的是实现页面内容的局部刷新，提高浏览体验，实现动态页面静态化。
涉及到的技术：HTML CSS JS DOM XML JSON等，属于前端范畴，是一个纯客户端技术。
2、 使用AJAX的步骤
-
创建XMLHttpRequest对象 – XMLDOM的对象
var xhr = null;
if(window.XMLHttpRequest){//DOM
xhr = new XMLHttpRequest();
}else{//老IE
xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
} -
绑定onreadystatechange事件监听函数 – 负责监听服务器返回状态与处理返回数据
xhr.onreadystatechange = function(){
if(xhr.readyState=4){ //响应消息接收完成
if(xhr.status=200){ //一个成功的响应
doResponse(xhr.responseText);//处理函数
}else{
alert(‘接收到一个不成功的AJAX响应：’+xhr.status);
}
}
} -
创建请求消息
xhr.open(‘GET/POST’, ‘xx.php’, true); -
发送请求消息
xhr.send( null/data );
3、 XMLHttpRequest对象的常用成员——重点
XHR对象的作用：发起异步的HTTP请求消息，并接收服务器返回的响应消息。
常用成员属性
status:0 保存着服务器返回的响应消息的状态码
statusText:’’ 保存着服务器返回的响应消息的原因短句
readyState:0
只读，随着请求响应的进程而改变 – 用于描述当前请求/响应进行到哪一步了 0：UNSENT 请求消息尚未发送
1：OPENED XHR已经创建请求消息，打开针对服务器的连接
2：HEADERS-RECIVED XHR对象已经接收到响应消息的头部
3：LOADING XHR正在加载响应主体数据
4：DONE XHR已经接收完毕响应消息
responseText:’’ 保存着响应消息的主体 – 看做一段string
responseXML:null 保存着响应消息的主体 – 看做一段XMLDOM
timeout:0 设置XHR发起请求后，等待服务器给出响应消息的时间
常用成员事件
onreadystatechange:fn 当XHR的readyState值发生改变，触发此句柄
ontimeout:fn 当XHR的请求超时，触发此句柄
onerror:fn 当XHR发生请求/响应错误，触发此句柄
常用的成员方法
open(method,URI,isAysnc) 创建一个http请求消息，打开一个针对服务器的连接
send(null/’k1=v1&k2=v2’) 发送http请求消息
setRequestHeader(name,value) 在请求消息发送前，设置一个请求消息头部
getAllResponseHeaders() 获取响应消息中所有头部
getResponseHeader(headerName) 获取响应消息中指定的头部
4、 使用原生AJAX发起HTTP GET请求消息
示例：用户名输入完成后，立即提示该用户名是否已被占用——异步请求/响应
//1 创建XHR对象
var xhr = …;
//2 绑定监听函数
xhr.onreadystatechange=function(){
if(xhr.readyState=4){
if(xhr.status=200){
}else{
}
}
}
//3 创建请求消息
xhr.open(‘GET’, ‘xx.php?k1=v2&k2=v2&k3=v3’, true);
//4 发送请求消息
xhr.send(null);
5、 使用原生AJAX发起HTTP POST请求消息
示例：批量的数据录入，不需要页面跳转
//1 创建XHR对象
var xhr = …;
//2 绑定监听函数
xhr.onreadystatechange=function(){
if(xhr.readyState=4){
if(xhr.status=200){
}else{
}
}
}
//3 创建请求消息
xhr.open(‘POST’, ‘xx.php’, true);
//3.5 设置请求头部
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
//4 发送请求消息
xhr.send(‘k1=v1&k2=v2’);
请求消息的Content-Type头常用值：
text/plain ： 客户端向服务器提交的请求主体是一些普通文本数据（未经编码）——很多Web服务器会直接拒绝接收这样的请求数据
application/x-www-form-urlencoded : 客户端向服务器提交的请求主体是经过了编码的文本数据——默认情况下，HTMLForm标签会把所有的表单数据编码之后再提交给服务器
multipart/form-data : 客户端向服务器提交的请求主体中包含上传的文件
注意：HTTP协议规定：请求消息传递给服务器的数据中不能包含中文、特殊标点符号
响应消息的Conent-Type头常用值： MIME类型
常见的MIME(Multipurpose Internet Mail Extension)：
.jpeg .jpg <= image/jpeg
.html .htm <= text/html
.mpeg3 .mp3 <= audio/mpeg3
MIME类型，就是用于唯一的标示一种特定格式的文件的一个描述符
常见的MIME类型：
image/jpeg image/gif image/png
text/plain text/html text/css
application/javascript application/xml application/json
application/msword …
6、 使用原生AJAX接收服务器返回的text响应
示例：点击酒馆，获得英雄列表
服务器端：
header(‘Content-Type: text/plain’);
客户端：
(1)(2) console.log(xhr.responseText);// 客户端用xhr.responseText接收
(3)(4)
7、 使用原生AJAX接收服务器返回的html响应——重点
示例：动态数据的级联下拉列表
服务器端：
header(‘Content-Type’, ‘text/html’);
客户端：
(1)(2) document.getElementXxxx().innerHTML = xhr.responseText; // 客户端用xhr.responseText接收，挂到dom树上
(3)(4)
8、 使用原生AJAX接收服务器返回的script响应
示例：加载不同的JS，实现页面主题的定制
服务器端：
header(‘Content-Type’, ‘application/javascript’) //如果是从php页面返回js脚本时，设置，如果直接请求js页面，不需要
客户端：
(1)
(2) typeof( xhr.responseText ); //string
eval( xhr.responseText ); //把string作为js来执行
(3)xhr.open(‘GET’,‘theme+’.js’,true); //或直接请求js页面
(4)
9、 使用原生AJAX接收服务器返回的XML响应
XML DOM：用于处理XML文档：XMLHttpRequest （ajax异步请求对象），DOMParser - 可以把一段XML字符串解析为一棵DOM树
示例：异步的加载新闻列表
服务器端：
header(‘Content-Type’, ‘application/xml’)
客户端：
(1)
(2) /使用DOM解析 再挂到DOM树上/
var xmlDocument=xhr.responseXML;
//console.log(typeof(xmlDocument));
//console.log(xmlDocument);
//使用核心DOM操作方法，解析XMLDOM树
var list=xmlDocument.getElementsByTagName(“news”);
(3)
(4)
10、使用原生AJAX接收服务器返回的json响应——重点
JSON格式表示字符串，有两种格式：
JSON对象字符串格式：’{ “k1”:“v1”, “k2”: v2 }’
JSON数组字符串格式：’[ v1, v2, v3… ]’
示例：异步的加载新闻列表
服务器端：
header(‘Content-Type: application/json’);
$arr = [ ];
echo json_encode( $arr ); //PHP数组=>JSON字符串
客户端：
(1)
(2) var jsObj = JSON.parse( xhr.responseText ); //把JSON字符串解析为JS数组/对象
(3)
(4)
服务器端（PHP数据） => JSON字符串 => 客户端（JS对象）
11、jQuery对AJAX操作的封装（6个方法）文章来源：https://www.toymoban.com/news/detail-851115.html
1、load()
$(’…’).load(url, [data], [fn]) 异步加载指定URL返回的数据(必需是text/html)，挂载为当前选定元素的innerHTML
示例：仿写GoogleSuggest，搜索建议
服务器端：
header(‘Content-Type: text/html’);
客户端：
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲suggest ul').lo….ajax()
使用方法：
文章来源地址https://www.toymoban.com/news/detail-851115.html
到了这里，关于AJAX教程笔记，常用API的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
