XMLHttpRequest对象发送Ajax请求

XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。实现不重新加载网页，对网页进行局部刷新。

 

方    法	描    述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求 content是请求参数
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

发送ajax请求步骤：

      1.创建XMLHTTPRequest对象

　　2.使用open方法设置和服务器的交互信息（请求方式，请求路径，头部信息）

　　3.设置发送的数据，开始和服务器端交互

　　4.注册事件（响应回调函数）

　　5.更新界面

例：

 

//创建异步对象
var xhr = new XMLHttpRequest();

//设置请求的类型及url

var url = 请求路径

//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post/get', 'url' );//发送请求
xhr.send(请求参数);

//步骤四:注册事件 onreadystatechange 状态改变就会调用

xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } };
console.log(xhr.responseText);
}
};

为方便使用可以封装成一个方法

 

function ajax_method(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest(); // get 跟post 需要分别写不同的代码
if (method=='get') {
// get请求
if (data) {
// 如果有值
url+='?'; url
url+=data; }
}else{ } }
// 设置 方法 以及 url
ajax.open(method,url); // send即可
ajax.send();
}else{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url); // 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
}else{
// 木有值 直接发送即可
ajax.send();
}
} // 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText); // 将 数据 让 外面可以使用
// return ajax.responseText; // 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText; // 如果说 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
}}