ajax

2023-05-30 0 747

一、ajax概要

Ajax:一类触发器无创下控制技术,向服务器端允诺

Ajax的核心理念是XMLHttpRequest第一类,全称xhr

二、同时实现ajax的关键步骤

1、创建XMLHttpRequest第一类

var xhr = new XMLHttpRequest();

2、关上/预备允诺

open(模块1,模块2,模块3)

模块1:允诺类别 GET/POST

模块2:允诺的方向

模块3:与否触发器,预设是触发器,true则表示触发器,false则表示并行

3、推送允诺

send(模块)

模块:应用程序须要传达给前台的统计数据

GET允诺:假如有模块,模块是间接跟在允诺门牌号前面的,send方式的值增设为null;假如没模块,send方式的值也增设为null

POST允诺:假如有模块,将模块增设到send方式里;假如没模块,则send方式的值增设为null

POST允诺由于导出监督机制的其原因,须要展开不光的处置。即使POST允诺和Web配置文件递交是相同的,须要采用XHR来仿效配置文件递交。

xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);

4、接收响应

假如是触发器允诺,须要等待统计数据完全响应,再接收统计数据

xhr.readyState == 4 则表示完全响应

监听readyStste的值变化,须要使用onreadystatechange事件

先判断响应状态

xhr.status == 200,则表示响应成功

xhr.responseText

三、ajax封装

2、关上/预备允诺

允诺模块要格式化成为字符串,假如是GET允诺就拼在允诺方向后,假如是POST允诺就要写在send()方式模块

open(参数1,模块2,模块3)

模块1:允诺类别 GET/POST

模块2:允诺的方向

模块3:与否触发器,预设是触发器,true则表示触发器,false则表示并行

假如有模块,GET允诺模块是间接跟在允诺门牌号前面的,POST不须要

3、推送允诺

send(模块)

模块:应用程序须要传达给前台的统计数据

GET允诺:假如有模块,模块是间接跟在允诺门牌号前面的,send方式的值增设为null;假如没模块,send方式的值也增设为null

POST允诺:假如有模块,将模块增设到send方式里;假如没模块,则send方式的值增设为null

POST允诺虽然导出监督机制的其原因,须要展开不光的处置。即使POST允诺和Web配置文件递交是相同的,须要采用XHR来仿效配置文件递交。

xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);

4、接收响应

假如是触发器允诺,须要等待统计数据完全响应,再接收统计数据

xhr.readyState == 4 则表示完全响应

监听readyStste的值变化,须要采用onreadystatechange事件

最后不管是触发器还是并行允诺,都须要判读响应状态

先判断响应状态

xhr.status == 200,则表示响应成功

xhr.responseText

四、jQuery封装的ajax方式

1.ajax:

$.ajax(“允诺类别”,”允诺门牌号”,”允诺模块”,”返回统计数据类别”,”回调函数”);

$.ajax( {

type:”get”, // 允诺类别 GET/POST

url:”js/data.json”, // 允诺门牌号

data:{ // 允诺模块

uname:”zhangsan”

upwd:”123″

},

dataType:”json”, // 预期服务器返回的统计数据类别

success:function(result){ // 响应成功的回调函数

console.log(result);

loadTable(result);

}

});

2.GET

$.get(“允诺门牌号”,”允诺模块”,”回调函数”);

$.get(“js/data.json”,{uname:zs},function(result){

console.log(result);

});

3.POST

$.get(“允诺门牌号”,”允诺模块”,”回调函数”);

$.post(“js/data.json”,{uname:zs},function(result){

console.log(result);

});

4.getJSON:

$.getJSON(“允诺门牌号”,”允诺模块”,”回调函数”);

要求服务器返回的统计数据格式是json,会自动将统计数据格式化成json第一类

$.getJSON(“js/data.json”,{},function(result){

console.log(result);

});

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务