Ajax的原理及封装

Posted 2021-03-03 xiaozhi666666

Ajax原理

第一步：创建XMLHTTPRequest对象

var xhr = new XMLHttpRequest();

第二步：配置 xhr 对象

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

 

第三步：发送请求

xhr.send( null );

 

第四步：响应接收

xhr.onreadystatechange = function(){
// console.log(1);
// 只要判定成功状态即可，成功的状态码为4
if( 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( /^2d{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)
}