原生ajax配置详解
// 原生ajax ???// 1. 创建ajax对象 ???if(window.XMLHttpRequest){ ???????// // ?IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 ???????var xhr = new XMLHttpRequest() ???}else{ ??????// IE6, IE5 浏览器执行代码 ???????var xhr = new ActiveXObject("Microsoft.XMLHTTP") ???} ???// 2.连接服务器 open(方法，地址，异步传输) ???xhr.open(‘get‘,‘file:///d%3A/markown/index.html‘,true); ???????// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 配置请求头 ???// setRequestHeader(header,value) 向请求添加 HTTP 头。 ???????????// header: 规定头的名称 ???????????// value: 规定头的值 ???//3. 发送请求,如果使用的是post方法，则请求携带数据，在send中配置（仅post请求可用） ???xhr.send() ???????// 4.接收返回，客户端和服务器端有交互的时候会调用onreadystatechange ???xhr.onreadystatechange=function(){ ???????// xhr.readyState ??浏览器和服务器进行到哪一步了。 ???????// 0 --(未初始化) ：还没有调用open方法 ???????// 1 --(载入) ????：已调用send方法，正在发送请求 ???????// 2 --(载入完成) ?：send方法完成，已收到全部响应内容， ???????// 3. --(正在解析) ：正在解析响应内容。 ???????// 4 --(完成) ????：响应内容解析完成，可以在客户端使用 ???????if(xhr.readyState == 4){ ???????????if(xhr.status== 200){ ???????????????// xhr.responseText ?获得字符串形式的响应数据。 ???????????????// xhr.responseXML ?????获得 XML 形式的响应数据。 ???????????????console.log("请求成功，响应内容为" + xhr.responseText); ???????????}else{ ???????????????console.log("请求出错！！！"); ???????????} ???????} ???}
对ajax简单封装
function ajax(methods,url,callBack,text) { ???if(window.XMLHttpRequest){ ???????// ?IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 ???????var xhr = new XMLHttpRequest() ???}else{ ??????// IE6, IE5 浏览器执行代码 ???????var xhr = new ActiveXObject("Microsoft.XMLHTTP") ???} ???// 给methods 一个默认值 ???var methods = methods|| ‘get‘ ; ???xhr.open(methods,url,true); ???// 如果是get请求，直接调用send方法发送请求 ???if (methods== ‘get‘){ ???????xhr.send(); ???} ???// 如果是post请求，则可配置请求参数 ???if (methods==‘post‘){ ???????xhr.send(text); ???} ???xhr.onreadystatechange=function(){ ???????if(xhr.readyState == 4){ ???????????if(xhr.status== 200){ ???????????????// 请求成功之后调用回调函数 ???????????????callBack(xhr.responseText); ???????????}else{ ???????????????let error = ‘错误码‘ + xhr.status ???????????????callBack(error); ???????????} ???????} ???}}
调用
ajax(‘get‘,‘file:///d%3A/markown/index.html‘,‘‘,function(result){ ???console.log(result);})