XMLHttpRequest
var xhr = new XMLHttpRequest(); //首先创建XMLHttpRequest 的对象xhr.open("GET","js/data.json",true);//再对这个对象的open方法放入参数， 请求方式：get/post ?，请求地址：url ?，是否异步：true/falsexhr.send(null);//发送请求，参数为向服务器传递的参数。
xhr.onreadystatechange=function(){
if(readystate==4){
if(status==200){
console.log(xhr.responseText);
}
}
}GET 与 POST
在提供服务器请求的过程中，有两种方式，分别是：GET 和 POST。在 Ajax 使用 的过程中，GET 的使用频率要比 POST 高。那么什么是GET和POST呢？下文揭晓。
GET 请求
GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时， 可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。
xhr.open(‘get‘,‘diner/login?‘+‘name=Lee&age=100‘,true);
//一个通用的 URL 提交函数
function addURLParam(url, name, value) {
//判断的 url 是否有已有参数
url += (url.indexOf(‘?‘) == -1 ? ‘?‘ : ‘&‘);
url += encodeURIComponent(name) + ‘=‘ + encodeURIComponent(value);
return url;
}
POST 请求
POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是 使用的 POST 传输方式。
xhr.open(‘post‘, ‘diner/login‘, true);
对Ajax的封装
function ajax(obj) { ???????????????????????// 创建XMLHttpRequest ???????????var ?xhr = new XMLHttpRequest(); ???????????????????????// 得到url ???????????var url = obj.url; // js/data.json?id=1 ???????????var params = obj.data; // uname=zhang&upwd=123 ???????????????????????// 判断请求方式 ???????????if (obj.method == "get") { ???????????????url += url.indexOf("?") == -1 ? "?" + params : ?"&" + params; ???????????????// 打开请求 open(method,url,async) ???????????????xhr.open(obj.method,url,obj.async); ???????????????// 发送请求 ???????????????xhr.send(null); ???????????} else { ???????????????// 打开请求 open(method,url,async) ???????????????xhr.open(obj.method,url,obj.async); ???????????????// 模拟表单提交 ???????????????xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ???????????????// 发送请求 ???????????????xhr.send(params); ???????????} ???????????????????????// 监听请求状态 ???????????xhr.onreadystatechange = function () { ???????????????if (xhr.readyState == 4) { // 请求成功 ???????????????????callback(); // 调用回调方法 ???????????????} ???????????} ???????????????????????function callback() { ???????????????if (xhr.status == 200) { // 响应成功 ???????????????????// 调用对象的方法 ???????????????????obj.success(xhr.responseText); ???????????????} else { // 响应失败 ???????????????????alert("响应状态：" + xhr.status + ",错误信息："+xhr.statusText + "，说明：" + xhr.responseText); ???????????????} ???????????} ???????????????????} ???????
Ajax
原文地址：https://www.cnblogs.com/yxmgg/p/9124227.html