Ajax原理

第一步：创建XMLHTTPRequest对象

var xhr = new XMLHttpRequest();

第二步：配置 xhr 对象

xhr.open("请求方式" , "请求地址");

第三步：发送请求

xhr.send( null );

第四步：响应接收

xhr.onreadystatechange = function(){// console.log(1);// 只要判定成功状态即可，成功的状态码为4if( xhr.readyState === 4){console.log("数据请求成功");// 取出相应数据;console.log(xhr.responseText)}}

GET 请求

数据发送是在地址栏里进行拼接

var xhr = new XMLHttpRequest();xhr.open("GET" , "./03_data.php");xhr.send( null );xhr.onreadystatechange = function(){if( xhr.readyState === 4){console.log(xhr.responseText)}

PHP数据交互代码

<?php$username = $_REQUEST["username"];$password = $_REQUEST["password"];echo "用户名是: $username , 密码是 :$password";?>

POST请求

**数据是放在send之中，由send放入请求体之中带到后端去。**

var data = {a : 10,b : 20}var xhr = new XMLHttpRequest();xhr.open("POST","./02_data.php");xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘);xhr.send("a=10&b=20");xhr.onload = function(){console.log( xhr.responseText );}

 PHP数据交互代码

<?php$a = $_POST["a"];$b = $_POST["b"];echo "$a , $b";?>

仿照JQuery对Ajax进行封装

完整代码

function ajax( options ){var _default = {type : "GET",url : "",data : null,dataType : "text",status : null,success : function(){},complete : function(){},error : function(){}}options = assign( _default , options );options.type = options.type.toLowerCase();if( isObject(options.context) ){var callback_list = ["success","complete","error"];callback_list.forEach( function( item ){// console.log(options[item]);options[item] = options[item].bind( options.context );})}// 1. 创建shr ;var xhr = null;if(typeof XMLHttpRequest === "function"){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}// 1. 如果请求方式为get，那么我们把数据拼接到url上;if(options.type === "get"){options.url = toUrlData( options.data , options.url , options.type)}// 2. 如果请求方式为post，那么我们把数据拼接到data上;if(options.type === "post"){options.data = toUrlData( options.data , options.url , options.type)}// 3. 根据数据进行方法的调用;xhr.open( options.type , options.url , true ) ;options.type === "post" ? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") : "";// 4. 调用send方法;xhr.send( options.type=== "get" ? null : options.data );// 5. 调用回调函数;xhr.onreadystatechange = function(){if( xhr.readyState === 4 ){options.complete();if( /^2\d{2}$/.test(xhr.status) ){// 6.传递数据try{var res = options.dataType === "json" ? JSON.parse(xhr.responseText) : xhr.responseText; options.success(res);}catch(e){options.error(e,xhr.status);}}else{options.error("error",xhr.status);}// 策略模式调用 : if( isObject(options.status) ){typeof options.status[xhr.status] === "function" ? options.status[xhr.status]() : "";}}}}var options = {url : "./02_data.php",// dataType : "json",data : {a : 1, b : 2},type : "post",success : function(res){console.log(res , this);},error : function(res){console.log("失败",res);},complete : function(){console.log("完成");},context : { c : 1 },status : {200 : function(){console.log("我的状态码是200，非常正常");},404 : function(){console.log("我找不到页面了")}}}ajax( options )function assign(){var target = arguments[0];for(var i = 1 ; i < arguments.length ; i ++){// console.log(arguments[i]);for(var attr in arguments[i]){target[attr] = arguments[i][attr];}}return target;}function toUrlData( obj , url , method){if( isObject(obj) ){var str = "";for(var attr in obj){str += "&" + attr + "=" + obj[attr]}str = str.slice(1);method = method || "";if( method.toUpperCase() === "POST"){return str;}url += "?" + str;return url;}return url;}function isObject( data ){return (typeof data === "object" && data !== null && data.constructor && data.constructor === Object)}