Javascript与Ajax

时间 2019-11-12

标签 javascript ajax 栏目 JavaScript 繁體版

原文原文链接

1、XMLHttpRequest 对象 (XHR)浏览器

XMLHttpRequest 对象用于在后台与服务器交换数据，有了这个对象，咱们能够：服务器

在不从新加载页面的状况下更新网页；app

在页面已加载后从服务器请求数据；异步

在页面已加载后从服务器接收数据；函数

在后台向服务器发送数据。 post

2、建立XHRurl

Js代码spa

//建立XMLHttpRequest对象 code

function createXMLHttpRequest(){ orm
var xmlHttpRequest;
if(window.XMLHttpRequest){
//IE8+, FF, Chrome等浏览器内置XHR对象，能够直接建立
xmlHttpRequest = new XMLHttpRequest();
}else if(window.ActiveXObject){
//IE7和以前版本须要经过ActiveXObject建立XHR
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else{
//其余不支持XHR的浏览器
}
return xmlHttpRequest;
}

3、发送请求

在Javascrpt中使用XHR的如下方法发送请求：

Js代码 /**

* 初始化XHR请求
* @param method 请求的类型（get/post)
* @param url 请求的url
* @param isAsync 是否使用异步请求
* @param username 对于要求认证的服务器，能够提供用户名
* @param password 对于要求认证的服务器，能够提供密码
*/
open(method, url[, isAsync=true[, username=null[, password=null]]]);
/**
* 发送请求
* @param data 做为请求体的数据
*/
send([data=null]);

例：

var xhr = createXMLHttpRequest();
//使用同步方式发送GET请求
xhr.open("get", "http://sample.org/test", false);
xhr.send(null);
//使用异步方式发送POST请求并模拟表单提交
xhr.open("post", "http://sample.org/test", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("var1=val1&var2=val2");

4、注册回调函数

xhr.onreadystatechange = function(){
// Do something...
}

5、经常使用属性

1. readyState

HTTP 请求的状态.当一个 XMLHttpRequest 初次建立时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增长到 4。

5 个状态中每个都有一个相关联的非正式的名称，下表列出了状态、名称和含义

状态	名称	描述
0	UNSENT	初始化状态。XMLHttpRequest 对象已建立或已被 abort() 方法重置。
1	OPENED	open() 方法已调用，可是 send() 方法未调用。请求尚未被发送。
2	HEADERS_RECEIVED	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	LOADING	全部响应头部都已经接收到。响应体开始接收但未完成。
4	DONE	HTTP 响应已经彻底接收。

readyState 的值不会递减，除非当一个请求在处理过程当中的时候调用了 abort() 或 open() 方法。每次这个属性的值增长的时候，都会触发 readystatechange 事件。

2. responseText

这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

3. responseXML

若是响应的内容是"text/xml"或者"application/xml"，这个属性将保存包含响应数据的XML DOM文档（Document对象）。

4. status

响应的http状态码。

5. statusText

这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。

6、Ajax示例

Js代码

var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState==4) {
if (xhr.status==200) {
//do something
}
}
}
xhr.open("get", "http://sample.org/test", true);
xhr.send(null);

7、其余方法

Js代码 /**

* 取消请求并关闭链接，XHR对象重置为readyState为0的状态。
*/
abort()
/**
* 向一个打开但未发送的请求设置或添加一个HTTP请求头信息。
* @param headerName 须要设置或添加的头信息的名字（大小写不敏感）
* @param value 设置或添加的头信息的值
*/
setRequestHeader(headerName, value)
/**
* 取得一个包含全部响应的header信息的长字符串，若是 readyState 小于 3，这个方法返回 null。
*/
getAllResponseHeaders()
/**
* 取得指定的HTTP响应头信息的值。
* @param headerName 须要从响应中得到的头信息的名字（大小写不敏感）
*/
getResponseHeader(headerName)