get请求与post请求
get请求传送数据量较小，不能大于2KB，参数追加在URL后面，看的到明码的请求参数值。
post请求传送数据量大小不受限制，请求通过HTTP POST机制 将请求参数放在HTML Header中传输，看不到明码的请求参数值。
get请求send()不用传参数，post请求send()需要传参数。post请求需要设置setRequestHeader(“Content-Type”，“application/x-www-form-urlencoded”)。
发送get请求
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数
ajax.open('get','url?data='+data);//步骤三:onreadystatechange 状态改变就会调用
ajax.onload = function () {
if (ajax.status==200) {
//步骤五 回调响应
}
}// 步骤四:发送请求
ajax.send();注册事件
发送post请求
//
步骤一:创建异步对象var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数
ajax.open('post','url');
ajax.setRequestHeader(“Content-Type”，“application/x-www-form-urlencoded”)。
//步骤三:onreadystatechange 状态改变就会调用
if (ajax.status==200) {
//步骤五 回调响应
}
}// 步骤四:发送请求
ajax.send(data);注册事件
XML请求与表单提交
发送xml请求实际上依然是发送post请求，只是参数以xml字符串形式发送。
发送表单数据 html5提供了FormData
可以var FormData = new FormData（document.querySelector("#formId")）;获取表单数据，然后send（FormData ）。
封装原生js发送ajax请求
function ajax_method(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (method=='get') {
// get请求
if (data) {
// 如果有值
url+='?';
url+=data;
}
// 设置 方法 以及 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);
}
}
}
处理响应
现在Ajax技术已经逐步使用json响应来取XML响应。需要将responseType设置成json。通过response获取服务器响应。