La principale fonctionnalité d'AJax est d'utiliser des scripts pour manipuler l'échange de données entre HTTP et les serveurs Web sans provoquer de rechargement de page.
Utilisation de XMLHttpRequest
Tous les navigateurs modernes prennent en charge l'objet XMLHttpRequest (IE5 et IE6 utilisent ActiveXObject).
Créer un objet XMLHttpRequest
Par exemple
function createXML(){
if(typeof XMLHttpRequest != "undefined"){//标准
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){//兼容IE5，IE6
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
for (i=0,len=versions.length; i < len; i++) {
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){ //跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("no XRL object available.");
}
}var xml = new createXML();Copier après la connexion
Spécifiez la requête
Une fois l'objet créé, l'étape suivante pour lancer une requête http consiste à appeler la méthode open() de l'objet XMLHttpRequest. Il reçoit trois paramètres :
Le type de requête à envoyer, insensible à la casse
L'URL demandée, ici relative à l'URL du document, si l'URL absolue, le protocole, l'hôte et le port sont spécifiés, ils doivent correspondre au contenu correspondant du document : les requêtes inter-domaines signaleront généralement une erreur
Valeur booléenne indiquant s'il faut envoyer de manière asynchrone ;
s'il existe un en-tête de requête, l'étape suivante consiste à le définir.
xml.setRequestHeader("Content-Type","text/plain");Copier après la connexion
Si l'en-tête de la requête est appelé plusieurs fois, l'écrasement ne se produira pas
Si la requête nécessite une URL protégée par mot de passe, ce sera Le nom d'utilisateur et le mot de passe sont transmis à open() comme quatrième et cinquième paramètres
La dernière étape de la demande consiste à spécifier le corps facultatif et à l'envoyer au serveur . Il convient de noter que les requêtes GET n'ont absolument aucun corps, mais lorsque vous utilisez POST pour envoyer une requête, vous devez coopérer avec la méthode setRequestHeader
xml.send(null);
Copier après la connexion
Obtenir une réponse
Une réponse HTTP complète a un code d'état, une collection d'en-têtes de réponse et un corps de réponse. Ceux-ci sont disponibles via les propriétés et méthodes de l'objet XMLHttpRequest :
- Les propriétés status et statusText renvoient le code d'état HTTP (comme 200 ok) sous forme de chiffres et de texte
- Utilisez getResponseHeader et getAllResponseHeaders() pour interroger les en-têtes de réponse
- Le corps de la réponse peut être obtenu sous forme de texte à partir de l'attribut ResponseText et sous forme de Document à partir de l'attribut ResponseXML
- Les objets XMLHttpRequest sont généralement utilisés de manière asynchrone : la méthode d'envoi est renvoyée immédiatement après l'envoi de la demande, et les méthodes de réponse et les propriétés répertoriées précédemment ne sont valides qu'après le retour de la réponse. Afin d'être averti lorsque la réponse est prête, il est nécessaire d'écouter l'événement readystatechange sur l'objet XMLHttp
readyState est un entier qui spécifie l'état de la requête HTTP
Informations d'en-tête HTTP.
可以自定义请求头部
xml.setRequestHeader("MyHeader","MyValue");Copier après la connexion
控制台输出
相应，可以使用getAllResponseHeaders进行查询
GET请求
可以将查询字符串参数添加到URL末尾。
function addURLParam(url,name,value){
url += (url.indexOf(?) == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" +encodeURIComponent(value);
return url;
}Copier après la connexion
POST请求
用来向服务器发送应该被保存的数据，将数据作为请求的主体提交，主体可以包含非常多的数据，并且数据格式不限
function submitData(){
var xml = createXML();
xml.onreadystatechange = function(){
if(xml.readyState === 4){
if((xml.status >= 200 && xml.status < 300) || xml.status === 304){
console.log(xml.responseText);
}else{
console.log("request is not ok" + xml.status);
}
}
}
xml.open("POST","postexample.php",true);
xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//原因见表单编码的请求一节
var form = document.getElementById("user-info");
xml.send(serialize(form));//serialize函数用来将页面中的表单数据格式化}Copier après la connexion
编码请求主体
表单编码的请求
当用户提交表单时，表单中的数据编码到一个字符串中并随请求发送。默认情况下，HTML表单通过POST方法发送给服务器，编码后的表单数据则用作请求主体。对表单数据使用的编码方案：对每个单元素的键值对进行普通的URL编码，使用等号把编码后的名字和值连接起来，并使用&链接键值对，如：name1=value1&name2=value2;
表单数据编码格式有一个正式的MIME类型：application/x-www-form-urlencoded，当使用POST方法提交表单数据时，必须设置Content-Type请求头为这个值。
举个栗子
function encodeFormData(data){
if(!data) return "";//无数据就返回空串
var pairs = [];//用来保存键值对
for(var name in data){ if(!data.hasOwnProperty(name)) continue;//跳过继承属性
if(typeof data[name] === "function") continue;//跳过方法
var value = data[name].toString();
name = encodeURIComponent(name.replace(/%20/g,"+"))//因为由于历史原因，表单提交的 x-www-form-urlencoded 格式要求空格编码为 + 。但 encodeURIComponent 是遵照后来的标准编码为 %20 的。
value = encodeURIComponent(value.replace(/%20/g,"+"))
pairs.push(name + "=" + value);
} return paris.join('&')//连接键值对}function getData(url,data,callback){
var request = new XMLHttpRequest()
request.open("GET",url+"?"+encodeFormData(data))
request.onreadystatechange = function(){
if(request.readyState === 4 && callback) callback(request)
}
request.send(null);
}function postData(url,data,callback){
var request = new XMLHttpRequest();
request.open("POST",url);
request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);
}
}
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(encodeURIComponent(data));
}Copier après la connexion
JSON编码的请求
举个栗子
function postJson(url,data,callback){
var request = new XMLHttpRequest();
request.open("POST",url);
request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);
}
} request.setRequestHeader("Content-Type","application/json");
request.send(JSON.stringify(data));
}Copier après la connexion
上传文件
举个栗子
input.addEventListener("change",function(){//添加事件监听
var file = this.file[0];
var xhr = new XMLHttpRequest();
xhr.open("POST",URL);
xhr.send(file);
},false)Copier après la connexion
multipart/form-data 请求
当表单同时包含上传文件和其他元素的时候，浏览器必须使用“multipart/form-data”的特殊Content-Type来用POST方法提交表单。XHR2定义了新的FormData API，。
举个栗子
function postData(url,data,callback){
var request = new XMLHttpRequest();
request.open("POST",url);
request.onreadystatechange = function(){
if(request.readyState === 4 && callback){
callback(request);
}
} var form = document.getElementById("user-info");
request.send(new FormData(form));
}Copier après la connexion
HTTP进度事件
六个基本事件
loadstart:在接收到响应数据的第一个字节时触发
progress:在接收响应期间持续不断地触
error:在请求发生错误时触发
abort:在因为调用abort()方法而终止连接时触发
load:在接收到完整的响应数据时触发
loadend:在通信完成或者触发error、abort或load事件后触发
load事件
使用load事件代替onreadystatechange事件，响应完毕后就触发load事件，没有必要再去检查readystate属性。
只要浏览器接收到服务器的响应，无论状态如何，都会触发load事件，所以需要确定status属性值从而确定数据是否可用。
举个栗子
var xml = new createXML();xml.onload = function(event){
if((xml.status >= 200 && xml.status < 300) || xml.status === 304){
var request = document.getElementById("request");
request.innerHTML = xml.responseText;
}else{
console.log("request is not ok" + xml.status);
}
}xml.open("get","hello-world.html",false);xml.send(null);Copier après la connexion
progress事件
这个时间会在浏览器接受新数据期间周期性的触发。而progress事件处理程序会接收到一个event对象，其中target属性就是XHR对象，还有其他三种属性：lengthConputable表示进度信息是否可用的布尔值，loaded表示已经接收到的字节数，total表示根据Content-Length响应头部确定的预期字节数。
举个栗子
var xml = new createXML();xml.onload = function(event){
if((xml.status >= 200 && xml.status < 300) || xml.status === 304){
var request = document.getElementById("request");
request.innerHTML = xml.responseText;
}else{
console.log("request is not ok" + xml.status);
}
}xml.onprogress = function(event){
var p = document.getElementById("data");
if(event.lengthComputable){
console.log(event.position);
p.innerHTML = "Received " + event.loaded + " of " + event.total + " bytes";
}
}/*需要注意的是，必须保证调用open之前定义onprogress事件处理程序*/xml.open("get","hello-world.html",true);xml.send(null);Copier après la connexion
终止请求和请求超时abort()
举个栗子
function timeGetText(url,timeout,callback){
var request = new XMLHttpRequest();
var timedout = false; //判断是否超时
var timer = setTimeout(function(){
timedout = true;//超时
request.abort();//触发终止事件
},timeout);//如果超时，触发一个启动器
request.open("GET",url);//发起请求
request.onreadystatechange = function(){
if(request.readyState !== 4) return;//忽略未完成程序
if(timedout) return;//忽略超时程序
clearTimeout(timer);//取消等待的超时
if(request.status === 200){
callback(request.responseText);//成功
}
}
request.send(null);
}Copier après la connexion
图像ping
图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。图像Ping有两个主要的缺点，一是只能发送GET请求，二是无法访问服务器的响应文本。
var img = new Image();
img.onload = img.onerror = function(){
console.log("Done!");
};
img.src = "hello-world.html";Copier après la connexion
借助<script>发送HTTP请求：JSONP
设置script元素也可以作为一种AJAX传输机制，只需要设置其src属性，浏览器就会发送一个HTTP请求以下载src属性指定的URL。
使用这种方法进行传输的主要原因是它不受同源策略的影响，因此可以使用他们从其他服务器请求数据，还有一个原因是包含JSON数据的响应体会自动解码。
JSONP是JSON with padding的缩写。和JSON差不多，只不过是被包含在函数调用中的JSON。
JSONP由两部分组成，回调函数和数据。
举个栗子
var bd = document.body;function callbackFunction(result, methodName)
{
bd.innerText = result;
}
var script = document.createElement("script");
script.src = "***/jsonp.php?jsoncallback=callbackFunction";
bd.insertBefore(script,bd.firstChild);Copier après la connexion
举个栗子
function getJSONP(url,callback){
var cbnum = "cb" + getJSONP.counter++;
var cbname = "getJSONP." + cbnum;
if(url.indexOf("?") === -1){
url += "?jsonp=" + cbname;
}else{
url += "&jsonp=" + cbname;
} var script = document.createElement("script");
getJSONP[cbname] = function(response){
try{
callback(response);
} finally{ delete getJSONP[cbname];
script.parentNode.removeChild(script);
}
}
script.src = url;
document.body.appendChild(script);
}
getJSONP.counter = 0;Copier après la connexion
Conmet技术(服务器推送)
举个栗子
function createStreamingClient(url, progress/*接收到数据时调用的函数*/, finished/*关闭连接时调用的函数*/) {
var xhr = new XMLHttpRequest(),
received = 0;
xhr.open("get", url, true);
xhr.onreadystatechange = function() {
var result; if (xhr.readyState == 3) {
result = xhr.responseText.substring(received);
received += result.length;
progress(result);
} else if (xhr.readyState == 4) {
finished(xhr.responseText);
}
};
xhr.send(null); return xhr;
}var client = createStreamingCilent("streaming.php", function(data) {
alert("Received:" + data);
}, function(data) {
alert("Done!");
});Copier après la connexion
服务器发送事件
SSE（ Server - Sent Events， 服务器发送事件） 是围绕只读Comet交互推出的API或者模式。 SSE API用于创建到服务器的单向连接， 服务器通过这个连接可以发送任意数量的数据。 服务器响应的MIME类型必须是text / event - stream， 而且是浏览器中的Javascript API能解析的格式输出。 SSE支持短轮询， 长轮询和HTTP流， 而且能够在断开连接时自动确定何时重新连接。
SSE API
var source = new EventSource("myevents.php");/*必须同源*/Copier après la connexion
open： 在建立连接时触发
message： 在从服务器接收到新事件时触发
error： 在无法建立连接时触发
- 服务器返回的数据以字符串的格式保存在event.data中。 如果想强制立即断开并且不再重新连接， 可以调用close() 方法。
事件流
Web Sockets
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
当创建web Sockets之后，会有一个http请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会从http协议交换为Web Socket协议
由于使用了自定义的协议，未加密的URL是ws://,加密后的URLwss://
好处是能够在客户端和服务器之间发送非常少的数据，而不必担心http那样字节级的开销。
var Socket = new WebSocket(url, [protocol]/*可接受的子协议*/ );//创建对象
Copier après la connexion
| 事件 |
事件处理程序 |
描述 |
| open |
Socket.onopen |
连接建立时触发 |
| message |
Socket.onmessage |
客户端接收服务端数据时触发 |
| error |
Socket.onerror |
通信发生错误时触发 |
| close |
Socket.onclose |
连接关闭时触发 |
参考文档——websocket
AJax的主要特点是使用脚本操纵HTTP和web服务器之间的数据交换，不会导致页面重载。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
