javascript 无刷新 ajax局部刷新

AJAX的全称：Asynchronous JavaScript and XML（异步的Javascript和XML），Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

 

XMLHttpRequest

XMLHttpRequest对象是AJAX的基础。

 

方法

open(String method, String url, boolean asynch, String username, String password)
send(content)
setRequestHeader(String header, String value)
getAllResponseHeaders()
getReponseHeader(String header)
abort()

open()

method：请求方法

url：请求地址

asynch：异步/同步

username和password是可选的参数，具体参考url语法：

<schema>://<user>:<password>@<host>:<port>/<path>;<parmas>?<query>#<frag>

 

 send()

content：如果是get方式，不需要填写参数，也可以填写null；如果是post方式，需填写到参数中

 

setRequestHeader()

header和value用于设置请求头里的参数，例如content-type等

 

属性

onreadystatechange：请求状态改变的事件触发器，一般用于指定回调函数

readyState：请求状态，一旦改变就会触发上面的回调函数，它有5个状态：

　　0：未初始化

　　1：open方法成功调用以后

　　2：服务器已经应答客户端的请求

　　3：交互中。Http头信息已经接受，响应数据尚未结束

　　4：完成。数据接收完成

reponseText：服务器返回的文本内容

responseXML：服务器返回的兼容DOM的XML内容

status：服务器返回的状态码

statusText：服务器返回状态码的文本信息

 

实现步骤

// 第一步：创建XMLHttpRequest对象
let xmlHttp;
if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest;
}else {
    xmlHttp = new ActiveXObject('Microsoft.XMLHttp'); // 解决IE5、6兼容问题
}
// 第二步：注册回调函数
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        alert(xmlHttp.responseText); // 对响应结果进行处理
    }
}
// 第三步：配置请求信息，get请求参数可以直接写在url中，默认异步
xmlHttp.open("post", "localhost:8080/kunwu")
// 第四步：设置请求头的一些参数（非必需），此处设置的是post请求参数的格式
xmlHttp.setRequestHeader("content-type", "text/plain")
// 第五步：发送请求，此处填写的是post的请求参数，如果是get请求，此处不用填写参数或者填写null
xmlHttp.send("kunwu");