面向初学者的Ajax总结

1.Ajax的介绍、优缺点、应用场景和技术

Ajax :简介

异步JavaScript和XML(异步Javascript和XML)

它不是单一的技术，而是一系列交互式web应用相关技术的组合

AJAX是一种用于创建快速动态网页的技术。AJAX可以通过在后台与服务器交换少量数据，使网页异步更新。这意味着可以更新网页的一部分，而无需重新加载整个网页。

优点：

页面没有刷新，用户体验不错。异步通信，更快的响应能力。减少冗余请求，减轻服务器负担。基于标准化和广泛支持的技术，不需要下载插件或小程序。缺点：

Ajax杀死了后退按钮，破坏了浏览器的后退机制。存在一定的安全问题。对搜索引擎的支持很弱。破坏程序的异常机制。您不能通过URL直接访问ajax应用程序场景

场景1。数据验证场景2。按需数据检索场景3。自动页面更新AJAX包括以下五个部分：

Ajax不是一项新技术，而是几种原始技术的结合。它由以下技术组成。

用CSS和XHTML来表示。使用DOM模型进行交互和动态显示。数据交换和操作技术，使用XML和XSLT以及XMLHttpRequest与服务器异步通信。使用javascript进行绑定和调用。在上述技术中，除了XmlHttpRequest对象之外，其他所有技术都是基于web标准的，并且得到了广泛的应用。虽然XMLHttpRequest目前还没有被W3C采用，但它已经是事实上的标准，因为目前几乎所有主流浏览器都支持它

特别是，第一个图说明了传统Web应用程序的结构和使用AJAX技术的Web应用程序的结构之间的区别

主要区别不是JavaScript、HTML/XHTML和CSS，而是XMLHttpRequest用于从服务器异步请求XML数据

再看第二张图，传统的Web应用模式，用户体验是碎片化的，点击-等待-看到新页面-再次点击-再次等待。使用AJAX技术后，大部分计算工作都是由服务器完成的，用户并没有注意到

第二，创建ajax的步骤

Ajax的原理简单来说就是通过XmlHttpRequest对象向服务器发送异步请求，从服务器获取数据，然后用javascript操作DOM更新页面。最关键的一步是从服务器获取请求的数据。本地创建ajax可以分为以下四个步骤

1.创建XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象，这是Ajax实现的关键。发送异步请求、接收响应和执行回调都是通过它完成的

XMLHttpRequest对象内置于所有现代浏览器(IE7、火狐、Chrome、Safari和Opera)中。

创建XMLHttpRequest对象的语法：

var xhr=new XMLHttpRequest()；旧版本的Internet Explorer(IE5和IE6)使用ActiveX对象：

var xhr=new ActiveX object(' Microsoft。XMLHTTP’)；为了应对所有现代浏览器，包括IE5和IE6，请检查浏览器是否支持XMLHttpRequest对象。如果是，创建一个XMLHttpRequest对象。如果没有，请创建活动对象：

兼容在各种浏览器中创建Ajax的工具功能

函数create request(){ try { xhr=new XMLHttpRequest()；} catch(tryMS){ try { xhr=new ActiveX object(' Msxm12。XMLHTTP’)；} catch(others ms){ try { xhr=new ActiveX object(' Microsoft。XMLHTTP’)；}catch(失败){ xhr=null} } }返回xhr}2.准备请求

初始化XMLHttpRequest对象并接受三个参数：

xhr.open(方法、url、异步)；第一个参数表示请求类型的字符串，它的值可以是GET或POST。

获取请求：

xhr.open('GET '，demo.php？name=tsrotage=24，true)；开机自检请求：

xhr.open('POST '，demo.php，true)；第二个参数是作为请求目的地的网址。

第三个参数为true或false，指示请求是以异步模式还是同步模式发出的。(默认值为真，一般不建议为假)

True:以同步模式发送的请求将暂停所有javascript代码的执行，直到服务器收到响应。如果连接网络或下载文件时浏览器为false，页面会一直挂起。True:请求以异步模式发送，当请求对象发送和接收数据时，浏览器可以继续加载页面并执行其他javascript代码。3.发送请求

xhr . send()；一般Ajax提交的参数大多是简单的字符串，可以直接用GET方法把要提交的参数写入open方法的url参数，send方法的参数为null或空。

获取请求：

xhr.open('GET '，demo.php？name=tsrotage=24，true)；xhr . send(null)；开机自检请求：

如果需要像HTML表单一样的POST数据，可以使用setRequestHeader()添加一个HTTP头。然后在send()方法中指定要发送的数据：

xhr.open('POST '，demo.php，true)；xhr . setrequestheder(' Content-Type '，' application/x-www-form-URL encoded；字符集=UTF-8’；Xhr.sen4 .处理响应

xhr . onreadystatechange=function(){ if(xhr . readystate==4 xhr . status==200){ console . log(xhr . responsetext)；}}onreadystatechange:当处理过程改变时，执行以下功能

ReadyState :ajax处理

0:请求未初始化(未调用open())。

1:请求已建立，但尚未发送(尚未调用send())。

2:请求已经发送，正在处理中(通常现在可以从响应中获取内容头)。

3:请求正在处理中；通常，响应中的一些数据是可用的，但是服务器还没有完成响应的生成。

4:响应已完成；您可以获取并使用服务器的响应。

状态属性：

200:“确定”404:未找到页面响应文本：获取字符串形式的响应数据

以XML形式获取响应数据

使用JSON.stringify将对象转换为JSON格式

使用json.parse()将JSON转换为对象格式

返回值通常是json字符串，可以通过JSON.parse(xhr.responseText)转换成JSON对象

从服务器返回的数据是json格式的。这里有一个例子来说明如何使用它

1.首先，您需要从XMLHttpRequest对象中检索数据。这是一个JSON字符串，并将其转换为真正的JavaScript对象。使用JSON.parse(xhr.responseText)转换为JSON对象

2.遍历获得的数组，并向DOM添加新元素

函数示例(responseText){ var saleDiv=document . getelementbyid(' sales ')；var sales=JSON . parse(responseText)；for(var I=0；isales.lengthI){ var sale=sales[I]；var div=document . create element(' div ')；div.setAttribute('class '，' SalSeitem ')；div . innerhtml=sale . name sale . sales；salsediv . appendchild(div)；} }

5.完整的例子

var xhr=falseif(XMLHttpRequest){ xhr=new XMLHttpRequest()；} else { xhr=new ActiveX object(' Microsoft。XMLHTTP’)；};如果(xhr) {//如果xhr创建失败，仍然是原来的false xhr.open ('get '，')。/data.json '，true)；xhr . send()；xhr . onreadystatechange=function(){ if(xhr . readystate==4 xhr . status==200){ console . log(JSON . parse(xhr . responsetext))。姓名)；} }}data.json

{'name' :' tsrot '，' age' :24}此过程必须牢记在心

函数Ajax (URL，成功，失败){//1。创建连接var xhr=nullXhr=new XMLHttpRequest() //2。连接到服务器xhr.open('get '，url，true) //3。发送请求xhr . send(null)；//4.接受请求xhr . onreadystatechange=function(){ if(xhr . readystate==4){ if(xhr . status==200){ success(xhr . responsetext)；} else {//fail fail(xhr . status)；}}}}异步请求远程数据时XMLHttpRequest的工作流

谈谈JSONP

除了XMLHttpRequest，还有一种访问web服务器数据的方法，就是JSONP

如果HTML和JavaScript与数据同时在同一台机器上，则可以使用XMLHttpRequest

什么是JSONP？

JSONP(JSON with Padding)是一种非官方协议，允许在服务器端集成Script标签并返回到客户端，跨域访问以javascript回调的形式实现(这只是JSONP的一种简单实现形式)

JSONP有什么用？

由于同源策略的限制，XmlHttpRequest只允许请求当前源的资源(域名、协议、端口)。为了实现跨域请求，可以通过脚本标签实现跨域请求，然后在服务器端输出JSON数据并执行回调函数，从而解决跨域数据请求

JSONP怎么用？

客户端声明回调函数后，客户端通过脚本标签跨域向服务器请求数据，然后当服务器返回相应的数据，用XMLHttpRequest动态执行回调函数时，我们得到一个字符串；要使用JSON.parse将字符串转换为对象，当使用jsonp时，脚本标志将解析并执行返回的代码，当我们处理数据时，它已经是一个JavaScript对象

简单的例子

元内容=' text/html；charset=utf-8 ' http-equiv=' Content-Type '/script Type=' text/JavaScript '函数jsoncallback(result){ alert(result . a)；alert(result . b)；alert(result . c)；for(结果中的var I){ alert(I ' : '结果[I])；//循环输出a:1、b:2等。} }/script script type=' text/JavaScript ' src=' http:3358crossdomain.com/services.php?回调=jsoncallback '/script！- callback参数指示函数jsoncallback-在生成JavaScript代码时使用-注意浏览器的缓存问题

在末尾添加一个随机数可以避免频繁请求同一个链接的缓存问题。`三。jQuery中的Ajax

jQuery中的Ajax封装案例

//ajax请求后台数据varb TN=document . getelementsbytagname(' input ')[0]；BTN . onclick=function(){ Ajax({//JSON格式type:' post '，url3360' post.php '，data : ' username=poetriespwd=123456 '，asyn3360 true，success 3360 function(data){ } })；}//封装Ajax函数Ajax(AJSON){ varajx=null；var type=aJson.type | | ' getvar asyn=aJson.asyn | | truevar url=aJson.url//url接收和发送位置varsuccess=ajonson.success//传输完成后，success接收回调函数vardata=ajonson . data | | '；//data接收需要用if(window)传输的数据。XMLHttpRequest){//兼容处理ajx=new XMLHttpRequest()；//通用浏览器} else { ajx=new ActiveX object(' Microsoft . xmlhttp ')；//IE6 } if(type==' get ' data){ URL='/？'数据' ' Math . random()；}//初始化ajax请求ajx.open(类型、url、asyn)；//指定传输数据的格式ajx . setrequest header(' content-type '，' application/x-www-form-URL encoded ')；//发送ajax请求(包括后期数据传输)类型=='get '？ajx . send(): ajx . send(ajson . data)；//process request ajx . onreadystatechange=function(ajson){ if(ajx . readstate==4){ if(ajx . status==200ajx . status 300)//200是HTTP请求成功的状态码{//request成功处理数据success(ajx . response 0)} else { alert(' request error ' ajx . status)；} } } jQuery中Ajax的一些方法

Jquery封装了Ajax操作。jquery中的ajax()方法属于最低层方法，第二层是load()，$。get()，$。post()；第三层是$。getScript()和$。getJSON()，第二层使用频繁

load()方法

load()方法是jquery中最简单也是最常用的ajax方法，可以加载远程HTML代码并插入到DOM中。结构为：load(url、[数据]、[回调])

使用url参数指定选择器可以在页面中加载一些元素。加载方法中的url语法：url选择器注意：url和选择器之间有一个空格

传递方式

load()方法的传输模式是根据参数数据自动指定的。如果没有参数传递，则通过GET传递，否则通过POST传递

回调参数

加载完成后必须执行的操作。该函数有三个参数，表示请求返回的内容、请求状态和XMLHttpRequest对象。只要请求完成，回调函数就会被触发

$ ('# testtest ')。load ('test.html '，函数(responsetext，textstatus，XMLHttpRequest){//response text request返回的内容//textStatus请求状态：失败、错误、未修改、超时//XMLHttpRequest })load方法参数

参数名称类型描述url字符串请求的URL地址HTML页面数据(可选)对象键/值数据发送到服务器回调(可选)函数回调函数当请求完成时，无论请求成功还是失败。$.get()和$。post()方法

load()方法通常用于从web服务器获取静态数据文件。在项目中，您需要将一些参数传递给服务器中的页面，这样就可以使用$。get()和$。post()或$。ajax()方法

注：$。get()和$。post()方法是jquery中的全局函数

$.get()方法

美元。get()方法使用GET方法发出异步请求

结构为：$。get(url、[数据]、回调、类型)

如果服务器返回的内容格式是xml文档，需要在服务器端设置Content-Type代码如下：header(' Content-Type : text/XML 3360 carset=utf-8 ')//PHP

$的参数分辨率。get()方法

参数类型描述url String请求html页面地址数据(可选)发送到服务器的对象键/值数据将作为QueryString回调(可选)Function成功加载回调函数(仅当Response的返回状态为成功时才调用此方法)type(可选)String服务器返回的内容的格式，包括xml、HTML、script、json、text和_default $。post()方法

它的结构和用法与$相同。get()方法，区别如下

GET请求将在张乃URL之后传递参数，而POST请求将作为Http消息的实体内容发送到网络服务器。在ajax请求中，这种差异对用户来说是不可见的。GET方法对传输的数据有大小限制(通常不超过2KB)，而POST方法传输的数据量要比GET方法大得多(理论上是无限的)。GET方法请求的数据会被浏览器缓存，这样其他人就可以从浏览器的历史记录中读取数据，比如账号。在某些情况下，GET会带来严重的安全问题，而POST可以相对避免这些问题，而且GET和POST传输的数据在服务器上是不一样的。在PHP中，GET模式是用$ _ GET[]；开机自检模式由$_POST[]获得；在这两种方式中，$_REQUEST[]都可以用来获取摘要

一些传统的Ajax程序是通过使用load()，$。get()和$。post()。如果需要复杂的Ajax程序，$。需要ajax()。

$.ajax()方法

美元。ajax()方法是jquery最低的Ajax实现，其结构为$。ajax(选项)

这个方法只有一个参数，但是这个对象包含了请求设置和$所需的回调函数等信息。ajax()模式。参数以键/值的形式存在，所有参数都是可选的

美元常用参数分析。ajax()模式

参数类型描述url字符串(默认为当前页面地址)发送请求的地址类型字符串请求模式(POST或GET)默认设置GET超时数的请求超时时间(毫秒)。可用类型如下：xml:返回xml文档，jquery可以用来处理html:以纯文本形式返回的HTML信息，包含的脚本标签在插入DOM时也会执行脚本：以纯文本形式返回javascript代码。除非设置了缓存参数，否则不会自动缓存结果。注意：在远程请求期间，所有开机自检请求将被转换为获取请求。json:以jsonp:jsonp格式返回json数据。调用JSONP格式的函数时，比如myurl？回电=？jquery会自动替换后一个吗？是执行回调函数text:并在发送函数之前返回纯文本字符串的正确函数名。在发送请求之前，可以修改XMLHttpRequest对象的函数，比如添加一个自定义的HTTP头。如果在beforeSend中返回false，则可以取消这个Ajax请求。XMLHttpRequest对象是唯一的参数函数(XMLHttpRequest){ this；//完成completefunction请求后调用此Ajax request时传递的options参数}回调函数(请求成功或失败时调用)参数：xmlhttprequest对象和描述成功请求类型的字符串函数(XMLHttpRequest，text status){ this；//调用这个Ajax请求时传递的options参数}函数请求成功后调用的回调函数有两个参数：(1)服务器返回并根据dataTyppe参数处理的数据；(2)描述状态的字符串函数(data，text status){//data可以是xmlDoc、` ` jsonObj、html、text等。//调用此Ajax请求时传递的options参数}当errorfunction请求失败时，被调用的函数global Boolean默认为true。指示是否触发全局Ajax事件。如果设置为false，则不会触发。AjaxStart或AjaxStop可用于控制各种Ajax事件引用

夏普jQuery

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。