JS中的Ajax

2020-04-22

字数：1859 阅读时间：10min

阅读量：19532

原生JS的Ajax

Ajax是浏览器提供的一套，可以向服务端发送、获取，实现无刷新、动态获取数据的API，是Asynchronous Javascript And XML(异步 JavaScript 和 XML)的缩写；Ajax核心对象是XMLHTTPRequest对象，一个完整的Ajax请求可分为五步

实例化XMLHTTPRequest对象
使用open搭建客户端和服务端的通信
使用send向服务端发送请求
注册事件，监听readystatechange事件
当请求状态值(readyState===4)和状态码(status===200)完成时，获取响应体(responseText)并更新到页面

readyState状态值
- 0表示已创建对象
- 1表示已搭建服务器客户端窗口
- 2表示已接受到请求头
- 3表示正在接受请求体
- 4表示成功接收请求
status状态码
- 1**：请求收到，继续处理
- 2**：操作成功收到，分析、接受
- 3**：完成此请求必须进一步处理
- 4**：请求包含一个错误语法或不能完成
- 5**：服务器执行一个完全有效请求失败
  - 100——客户必须继续发出请求
  - 101——客户要求服务器根据请求转换HTTP协议版本
  - 200——交易成功
  - 201——提示知道新文件的URL
  - 202——接受和处理、但处理未完成
  - 203——返回信息不确定或不完整
  - 204——请求收到，但返回信息为空
  - 205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
  - 206——服务器已经完成了部分用户的GET请求
  - 300——请求的资源可在多处得到
  - 301——删除请求数据
  - 302——在其他地址发现了请求数据
  - 303——建议客户访问其他URL或访问方式
  - 304——客户端已经执行了GET，但文件未变化
  - 305——请求的资源必须从服务器指定的地址得到
  - 306——前一版本HTTP中使用的代码，现行版本中不再使用
  - 307——申明请求的资源临时性删除
  - 400——错误请求，如语法错误
  - 401——请求授权失败
  - 402——保留有效ChargeTo头响应
  - 403——请求不允许
  - 404——没有发现文件、查询或URl
  - 405——用户在Request-Line字段定义的方法不允许
  - 406——根据用户发送的Accept拖，请求资源不可访问
  - 407——类似401，用户必须首先在代理服务器上得到授权
  - 408——客户端没有在用户指定的饿时间内完成请求
  - 409——对当前资源状态，请求不能完成
  - 410——服务器上不再有此资源且无进一步的参考地址
  - 411——服务器拒绝用户定义的Content-Length属性请求
  - 412——一个或多个请求头字段在当前请求中错误
  - 413——请求的资源大于服务器允许的大小
  - 414——请求的资源URL长于服务器允许的长度
  - 415——请求资源不支持请求项目格式
  - 416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
  - 417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
  - 500——服务器产生内部错误
  - 501——服务器不支持请求的函数
  - 502——服务器暂时不可用，有时是为了防止发生系统过载
  - 503——服务器过载或暂停维修
  - 504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
  - 505——服务器不支持或拒绝支请求头中指定的HTTP版本

//Ajax的get请求
var xhr = new XMLHTTPRequest();//1.创建请求实例
xhr.open('GET','test.php',true)//2.搭建通信;第三个参数是异步还是同步一般不用写,默认是true异步
xhr.send();//3.发送请求
xhr.onreadystatechange = function (){//4.监听状态
if(this.readyState === 4 & this.status === 200){
console.log(this.responseText)//5.获取响应
}
}
//Ajax的post请求
var xhrp=new XMLHttpRequest();
xhrp.open("POST",'test.php');
xhrp.setRequestHeader('Content-Type', 'application/json');//post必须设置请求头
xhrp.send();
xhrp.onreadystatechange=function(){
if (this.readyState === 4) {
console.log(this);//实例化的ajax
console.log(this.status);//获取响应状态码
console.log(this.statusText);//获取响应状态描述
console.log(this.getResponseHeader('Content-Type'));//获取指定响应头信息
console.log(this.getAllResponseHeaders())//获取全部响应头
console.log(this.responseText);//获取响应体
console.log(this.response)//也是获取响应体但是他可以接受更多形式比如计算机二进制的响应；可以设置xhrp.responseType的属性来获取；但是兼容性不是很好
console.log(this.responseXML);//获取XML形式的响应体
}
}

//Ajax的get请求

var xhr = new XMLHTTPRequest();//1.创建请求实例

xhr.open('GET','test.php',true)//2.搭建通信;第三个参数是异步还是同步一般不用写,默认是true异步

xhr.send();//3.发送请求

xhr.onreadystatechange = function (){//4.监听状态

if(this.readyState === 4 & this.status === 200){

console.log(this.responseText)//5.获取响应

}

//Ajax的post请求

var xhrp=new XMLHttpRequest();

xhrp.open("POST",'test.php');

xhrp.setRequestHeader('Content-Type', 'application/json');//post必须设置请求头

xhrp.send();

xhrp.onreadystatechange=function(){

if (this.readyState === 4) {

console.log(this);//实例化的ajax

console.log(this.status);//获取响应状态码

console.log(this.statusText);//获取响应状态描述

console.log(this.getResponseHeader('Content-Type'));//获取指定响应头信息

console.log(this.getAllResponseHeaders())//获取全部响应头

console.log(this.responseText);//获取响应体

console.log(this.response)//也是获取响应体但是他可以接受更多形式比如计算机二进制的响应；可以设置xhrp.responseType的属性来获取；但是兼容性不是很好

console.log(this.responseXML);//获取XML形式的响应体

}

get和post的区别
1. get把请求写在url里，post把请求写在请求体里；相比较而言post更加安全
2. 由于浏览器和服务器对url的限制，get传递的参数是长度有限的ASCII字符，post没有什么限制；相比较而言post容量更大，能发送能多种数据类型
3. get会被缓存记录 (会被缓存、保存在服务器日志、以及浏览器浏览记录中 )，post不会
4. get发送请求是将header和data一起发送的，服务器响应200返回数据；post发送请求是先发送header，服务器相应100，再发送data，服务器响应200返回数据；相比较而言get比post快；（还有原因是post有更多的请求头，post数据不会被缓存，post不能进行管道化传输）
5. get一般用于搜索、筛选、获取数据，post一般用于修改、写入、提交数据

//自己封装JS中Ajax
function ajax(method,url,data,callback){
method=method.toUpperCase();//大写请求方式
if ((typeof data)==='object') {//处理参数data为对象的时候
var ll=[];
for(var key in data){
var item=key+'='+data[key];
ll.push(item);
}
data=ll.join('&');//将数组以&拼接为一个字符串输出
}
////get方式发送的请求写在url中；并令data为null
method==='GET'? (url+='?'+data)&(data=null):null;
var xhr=new XMLHttpRequest();
xhr.open(method,url);
//post方式时需要设置请求头
method==="POST"? xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'):null;
xhr.send(data);
xhr.onreadystatechange=function(){
if (this.readyState === 4 & this.status === 200) {
callback(this.responseText);
}
}
}

//自己封装JS中Ajax

function ajax(method,url,data,callback){

method=method.toUpperCase();//大写请求方式

if ((typeof data)==='object') {//处理参数data为对象的时候

var ll=[];

for(var key in data){

var item=key+'='+data[key];

ll.push(item);

}

data=ll.join('&');//将数组以&拼接为一个字符串输出

}

////get方式发送的请求写在url中；并令data为null

method==='GET'? (url+='?'+data)&(data=null):null;

var xhr=new XMLHttpRequest();

xhr.open(method,url);

//post方式时需要设置请求头

method==="POST"? xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode'):null;

xhr.send(data);

xhr.onreadystatechange=function(){

if (this.readyState === 4 & this.status === 200) {

callback(this.responseText);

}

JQ中的Ajax

JQ中将Ajax封装成了ajax对象，极大的简化了发送网络请求的代码

//底层封装
$.ajax({
url:'test.php',
type:'post',
dataType:'json',
headers:{
"Content-Type":"application/json"
},
data:{name:222,age:333},
/*beforeSend:function(xhr){//发送请求之前执行
console.log('beforeSend');
console.log(xhr.readyState);//在open之前；状态是0
},*/
success:function(data){//请求成功的时候执行
console.log(data);
}/*,
error:function(err){//错误的时候执行
console.log(err.status)
},
complete:function(){//不管成功与否都执行
console.log('complete')
}*/
})
//jsonp跨域请求
$.ajax({
url:'http://localhost/cors.php',
dataType:'jsonp',//只用将dataType设置为jsonp就行
data:{'ooo':888,'sss':'ccc'},
success:function(res){
console.log(res);
}
})
//高级封装$.get(url,data,callbackm,type)
$.get('test.php',{name:222,value:333},function(data){
console.log(data,'这是get方法');
},'json');
$.post('test.php',{name:222,value:333},function(data){
console.log(data,'这是post方法');
},'json');
$.getJSON('test.php',{name:666},function(data){
console.log(data,'这是getJSON方法');
});
//全局AJAX事件
$(function(){//(ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, and ajaxSuccess)1.只能在document元素上触发2.需要提前配置
$(document).ajaxComplete(function(){
console.log('this is  global complete')
});
$(document).ajaxError(function(){
console.log('this is  global error')
});
$(document).ajaxSuccess(function(){
console.log('this is  global success')
});
$(document).ajaxStart(function(){
console.log('this is  global start')
});
$(document).ajaxStop(function(){
console.log('this is global stop')
});
$('#sss').on('click',function(){
$.post('test.php',{kkk:211},function(res){
console.log(res)
});
});
});

//底层封装

$.ajax({

url:'test.php',

type:'post',

dataType:'json',

headers:{

"Content-Type":"application/json"

data:{name:222,age:333},

/*beforeSend:function(xhr){//发送请求之前执行

console.log('beforeSend');

console.log(xhr.readyState);//在open之前；状态是0

},*/

success:function(data){//请求成功的时候执行

console.log(data);

}/*,

error:function(err){//错误的时候执行

console.log(err.status)

complete:function(){//不管成功与否都执行

console.log('complete')

}*/

})

//jsonp跨域请求

$.ajax({

url:'http://localhost/cors.php',

dataType:'jsonp',//只用将dataType设置为jsonp就行

data:{'ooo':888,'sss':'ccc'},

success:function(res){

console.log(res);

}

})

//高级封装$.get(url,data,callbackm,type)

$.get('test.php',{name:222,value:333},function(data){

console.log(data,'这是get方法');

},'json');

$.post('test.php',{name:222,value:333},function(data){

console.log(data,'这是post方法');

},'json');

$.getJSON('test.php',{name:666},function(data){

console.log(data,'这是getJSON方法');

});

//全局AJAX事件

$(function(){//(ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, and ajaxSuccess)1.只能在document元素上触发2.需要提前配置

$(document).ajaxComplete(function(){

console.log('this is global complete')

});

$(document).ajaxError(function(){

console.log('this is global error')

});

$(document).ajaxSuccess(function(){

console.log('this is global success')

});

$(document).ajaxStart(function(){

console.log('this is global start')

});

$(document).ajaxStop(function(){

console.log('this is global stop')

});

$('#sss').on('click',function(){

$.post('test.php',{kkk:211},function(res){

console.log(res)

});

野生小园猿

励志做一只遨游在知识海洋里的小白鲨

查看“野生小园猿”的所有文章 →

JS中的Ajax

原生JS的Ajax

JQ中的Ajax

相关推荐