原生Ajax和jquery的ajax有什么区别？ - 网站源码_资源分享

主要就文本

ajax是甚么ajax促进作用原生植物ajax允诺jquery的ajax允诺jquery里头PCB的ajax方式自学最终目标

第二节 Ajax与http

名词ajax最先造成于2005年，Ajax则表示Asynchronous JavaScript and XML(触发器JavaScript和XML)，但它并非像HTML、JavaScript或CSS这种的一类“正式宣布的”控制技术，它是则表示许多控制技术的混和可视化的两个术

1.1 甚么是Ajax？

Ajax是一类控制技术方案，但并并非一类新控制技术。它依赖现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP允诺与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据可视化。

触发器的javascript和xml AJAX 是一类用于创建快速动态网页的控制技术。 ajax用来与后台可视化

1.2 Ajax可以做甚么？

显示新的HTML文本而不用载入整个页面提交两个表单并且立即显示结果登录而不用跳转到新的页面星级评定组件遍历数据库信息加载更多而不刷新页面1.3 客户端与服务器

本章作业

Ajax是甚么有甚么用

第二节 Ajax允诺步骤

2.1 Ajax允诺分4步完成

创建XMLHttpRequest对象准备发送允诺 open()发送允诺数据 send()允诺返回的回调函数 onreadystatechange=function(){}XMLHttpRequest对象用来在【浏览器】与【服务器】之间传送数据。通俗上来说将此对象称为request允诺对象、允诺对象或允诺。

2.1.1创建ajax步骤

1.创建XMLHttpRequest对象–进行ajax允诺

对象用来在【浏览器】与【服务器】之间传送数据浏览器提供给我们的对象

var xhr=new XMLHttpRequest();

2.准备发送数据open()方式

语法：xhr.open(‘请求类型’，’url地址’，是否触发器);

xhr.open(get,02-post.php,true);

3.发送 send() 实际发送的数据 get允诺为空 null

xhr.send(null);

4.回调函数onreadystatechange属性指向两个回调函数。

当页面的加载状态发生改变的时候readyState属性就会跟随发生变化，而这时readystatechange属性所对应的回调函数就会自动被调用。

xhr.onreadystatechange=function(){ if(xhr.readyState==4){//则表示服务器数据已经完全接收if(xhr.status==200){//, OK，访问正常console.log(xhr.responseText) } }}

onreadystatechange 事件

当允诺被发送到服务器时，我们需要执行许多基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

2.1.2 readyState状态码

2.1.3 get有参

2.1.4 post有参

【json数据】

2.1.6 XMLHttpRequest兼容

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject(“Microsoft.XMLHTTP”);

【代码演示】

var xmlhttp;if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest(); }else {// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); }

2.1.7 timout

本章作业

1.默写ajax允诺步骤

2.get传递参数post传递参数

3.json数据解析

第三节 jquery的ajax

3.1 Ajax步骤

$(#btn).click(function(){var name=$(“.name”).val();$.ajax({type:post,//允诺方式url:09jquery_ajax.php,data:{uname:name,},success:function(res){console.log(res);$(“.info”).html(res);},error:function(){console.log(“允诺失败”);},beforeSend:function(){//允诺数据之前执行的文本console.log(“数据允诺中…..”);$(“.info”).html(数据允诺中…..);},})})

3.2 回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送允诺之前调用，并且传入两个XMLHttpRequest作为参数。

error 在允诺出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及两个异常对象

dataFilter 在允诺成功之后调用。传入返回的数据以及”dataType”参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。

success 当允诺之后调用。传入返回后的数据，以及包含成功代码的字符串。

complete 当允诺完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及两个包含成功或错误代码的字符串。

3.2.1防止重复数据

在实际项目开发中，提交表单时常常由于网络或者其原因，用户点击提交按钮误认为自己没有操作成功，进而会重复提交按钮操作次数，如果页面前端代码没有做许多相应的处理，通常会导致多条同样的数据插入数据库，导致脏数据的增加。要避免这种现象，在$.ajax允诺中的beforeSend方式中把提交按钮禁用掉，等到Ajax允诺执行完毕，在恢复按钮的可用状态。举个例子：// 提交表单数据到后台处理$.ajax({type: “post”,data: studentInfo,contentType: “application/json”,url: “/Home/Submit”,beforeSend: function () {// 禁用按钮防止重复提交$(“#submit”).attr({ disabled: “disabled” });},success: function (data) {if (data == “Success”) {//清空输入框clearBox();}},complete: function () {$(“#submit”).removeAttr(“disabled”);},error: function (data) {console.info(“error: ” + data.responseText);}});

3.2.2模拟Toast效果

ajax允诺服务器加载数据列表时提示loading(“加载中，请稍后…”),$.ajax({type: “post”,contentType: “application/json”,url: “/Home/GetList”,beforeSend: function () {$(“loading”).show();},success: function (data) {if (data == “Success”) {// …}},complete: function () {$(“loading”).hide();},error: function (data) {console.info(“error: ” + data.responseText);}});