当前位置：文档库 › $.ajax()方法详解

$.ajax()方法详解

各位读友大家好！你有你的木棉，我有我的文章，为了你的木棉，应读我的文章！若为比翼双飞鸟，定是人间有情人！若读此篇优秀文，必成天上比翼鸟！

$.ajax()方法详解1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。4.async:要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。5.cache:要求为Boolean类型的参数，默认为true（当dataType为script 时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。6.data:要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get 请求中将附加在url后。防止这种自动转换，可以查看processData 选项。对象必须为key/value格式，例如{foo1:”bar1”,foo2:”bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,”bar2”]}转换为&foo=bar1&foo=bar2。7.dataType:要求为String类型的参数，预

期服务器返回的数据类型。如果不指定，JQuery将自动根据http 包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：xml：返回XML文档，可用JQuery 处理。html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。json：返回JSON 数据。jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。text：返回纯文本字符串。8.beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest 对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数}https://www.wendangku.net/doc/f618998790.html,plete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数}10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。(1)由服务器返回，并根据dataType参数进行处理后的数据。(2)描述状态的字符串。fnction(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text

等等this; //调用本次ajax请求时传递的options参数}11.error:要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：function(XMLHttpRequest, textStatus, errorThrown){ /情况下textStatus和errorThrown只有其中一个包含信息this; //调用本次ajax请求时传递的options参数}12.contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。13.dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。function(data, type){ //返回处理后的数据return data; }14.dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data 是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。function(data, type){ //返回处理后的数据return data; }15.global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax 事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop 可用于控制各种ajax事件。16.ifModified：要求为Boolean类型

的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。17.jsonp：要求为String类型的参数，在一个jsonp 请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分，例如{jsonp:'onJsonPLoad'}会导致将”onJsonPLoad=?”传给服务器。https://www.wendangku.net/doc/f618998790.html,ername：要求为String类型的参数，用于响应HTTP 访问认证请求的用户名。19.password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。20.processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型”application/x-www-form-ur lencoded”。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。21.scriptCharset：要求为String类型的参数，只有当请求时dataType为”jsonp”或者”script”，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。案例代码：

jQuery Ajax 全解析(.ajax .post .get)

jQuery Ajax 全解析【.ajax .post .get】 1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。示例代码： $(".ajax.load").load("https://www.wendangku.net/doc/f618998790.html,/QLeelulu/archive/2008/03 /30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求参数： url (String) : 发送请求的URL地址.

ajax与php结合实现用户登录(详解)

这是login.html页面无标题文档

jQuery Ajax 应用实例解析大全

jQuery Ajax应用解析 jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。 url(String) : 请求的HTML页的URL地址。 data(Map) : (可选参数) 发送至服务器的key/value 数据。 callback(Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。示例代码： $(".ajax.load").load("https://www.wendangku.net/doc/f618998790.html,/QLeelulu/archive/2008/03/30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求参数： url(String) : 发送请求的URL地址. data(Map) : (可选) 要发送给服务器的数据，以Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。 callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例代码： $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){

PHP JQUERY AJAX 提交表单FORM详解

PHP jQuery Ajax Form表单提交实例解析，包括创建一个表单html页面、添加JQuery代码、jquery ajax表单提交、jquery ajax表单验证、反馈信息给用户，php ajax 表单验证，php ajax提交表单，php ajax form验证，php ajax提交form。本实例用到JQuery类库本身的函数和功能，所有表单信息利用PHPMailer类库邮件的形式发送。 1、创建一个表单html页面表单部分html代码这里用一个id为contact_form来包含整个包含信息；这是有意义的，稍后在JavaScript与用户交互信息的时候会用到，这里form标签的属性里面既包含了method和action；这个意义其实不大，因为Javascript直接操作DOM，所以没有这两个属性也是可以的；务必要给用户输入的input标签加独立的id，这和第二点原理类似。否则，无法看到正常的效果。 2、添加JQuery代码这里假设你已经从JQuery官方网站上下载了JQuery基库，然后上传到了你的WEB服务器，并添加到你要使用的网页中。

现在新建一个JS文件第1行的function()函数与Jquery的document.ready函数用法和功能相同，都是在DOM准备完毕后自动触发。第2行里面是一个单击触发函数click()，需要注意的是，在HTML一页提交按钮上需要放置一个名为“button”的Class，以模拟实现submit 提交表单的功能，从第二点我们可以看出，JQuery可以很好的将结构和逻辑分离。 3、jquery ajax表单验证在实际应用中，这一步是必不可少的。在用户漏填，错填某个项目时，及时提示。

jQuery调用AJAX异步操作超清晰教程

JQUERY AJAX异步操作详细说明 AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和XML）。它并非一种新的技术，而是以下几种原有技术的结合体。 1)使用CSS和XHTML来表示。 2)使用DOM模型来交互和动态显示。 3)使用XMLHttpRequest来和服务器进行异步通信。 4)使用javascript来绑定和调用。通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型： 1)不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。界面不会出现白板，在得到服务器响应之前还可以友好的给出一个加载提示。 2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数，待服务器响应到达时，触发回调函数，并且传递所需的少量数据。“按需取数据”也降低了服务器的压力。 3)不需要使用隐藏或内嵌的框架。在XHR对象之前，模拟Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架(标签)。下面介绍下AJAX中的重要对象：XMLHttpRequest。 XMLHttpRequest对象(XHR) XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。 XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象，但是以一个本地JavaScript对象而不是作为一个ActiveX 对象实现。而如今，由于安全性、标准等问题，微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。 API描述客服端请求 open(method,url,a sync, bstrUser, bstrPassword)规定请求的类型、URL 以及是否异步处理请求。 1)method：请求的类型，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 2)url：请求的URL地址，可以为绝对地址也可以为相对地址。 3)async[可选]：true（默认，异步）或 false（同步）。注释：当您使用async=false 时,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。此时，不需要编写onreadystatechange回调函数，把代码放到send() 语句后面即可。</p><h2>AJAX(XMLHttpRequest)进行跨域请求方法详解</h2><p>发表于:2010-1-11 浏览:965 作者:转载遗失来源:网络转载关键字:AJAX,详解,请求描述:注意：以下代码请在Firefox3.5、Chrom e3.0、Safari4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过style 标签加载外部样式表文件、通过img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过Webfont 加载字体文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。那么，什么是同源策略呢？如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同，则还可以通过设置document.domain 属性将它们认为是同源的。随着Web2.0 和SNS 的兴起，Web 应用对跨域访问的需求也越来越多，但是，在脚本中进行跨域请求是受安全性限制的，Web 开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合（Mashup）自己的Web 应用。这样做的一个好处就是可以将请求分摊到不同的服务器，减轻单个服务器压力以提高响应速度；另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。值得庆幸的是，跨域请求的标准已经出台，主流浏览器也已经实现了这一标准。W3C 工作组中的 Web Applications Working Group（Web 应用工作组）发布了一个Cross-Origin Resource Sharing（跨域资源共享，该规范地址：https://www.wendangku.net/doc/f618998790.html,/TR/access-control/和 https://www.wendangku.net/doc/f618998790.html,/2006/waf/access-control/）推荐规范来解决跨域请求的问题。该规范提供了一种更安全的跨域数据交换方法。具体规范的介绍可以访问上面提供的网站地址。值得注意的是：该规范只能应用在类似XMLHttprequest 这样的API 容器内。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了Cross-Origin Resource Sharing 规范，已经可以进行跨域请求了。 Cross-Origin Resource Sharing 的工作方式是通过添加HTTP 头的方法来判断哪些资源允许 Web 浏览器访问该域名下的信息。然而，对于那些HTTP 请求导致用户数据产生副作用的请求方法（特别是对于除了GET、某些MIME 类型的POST 之外的HTTP方法），该规范要求浏览器对请求进行“预先验”，通过发送HTTP 的OPTIONS 请求头询问服务器有哪些支持的方法，在征得服务器的同意后，再使用实际的HTTP 请求方法发送实际的请求。服务器也可以通知客户端是否需要将验证信息（如Cookie 和HTTP Authentication 数据）随同请求一起发送。下面我们就采用实际的例子说明Cross-Origin Resource Sharing 是如何工作的。 1，简单请求</p><h2>JQuery中的AJAX详解</h2><p>JQuery中的AJAX详解目录(?)[-] load()方法 load(url,[data],[callback]) url为被加载的页面地址 data表示发送到服务器的数据，格式为key/value callback格式为：function(responseText,textStatus,XMLHttpRequest){ } //responseText:请求返回的内容 //textStatus:请求状态：success、error、notmodified、timeout这4种 //XMLHttpRequest:XMLHttpRequest对象 load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST 方式 [javascript]view plaincopyprint? 1.$("#div1").load( 2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass"，则表示获取jsp页面中类名为filterClass的全部元素 3.{ 4. name ：clf, age : 25 5.//经测试，变量名加引号、单引号、不加引号，后台都能取到值 6.//如果含有中文，必须用encodeURI()进行编码，然后再服务器端用decodeURI()解码即可，如 7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()}, 8.}, //也可以用数组传值，{"attr []",["clf","25","male"]} 9.function (){ 10. $("#div2").text("AJAX"); 11.} 12.); [javascript]view plaincopyprint? 1.$("div").load("wrongname.xml",function(response,status,xhr){ 2.if (status=="success")</p><h2>JQuery中$.ajax()方法参数详解</h2><p>JQuery中$.ajax()方法参数详解 url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。 cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。 data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如 {foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery 将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为 &foo=bar1&foo=bar2。 dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache 参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery 将自动替换后一个</p><h2>Ajax技术与传统Web应用的比较</h2><p>中图分类号:TP393.01 文献标识码:B 文章编号:1009-2552(2010)01-0108-03 Ajax技术与传统Web应用的比较孙启良 (济南大学理学院,济南250022) 摘要:Ajax技术是浏览器与服务器交互方式的巨大改进,是Web2.0时代的重要标志。Ajax技术利用客户端闲置的处理能力,减轻了服务器和带宽的负担,使用户交互变得流畅而连续。介绍了Aja x的工作原理,基本特点以及与传统Web应用的区别,并给出了一个Ajax实例。关键词:HTML;Ajax;JSP;JavaScript Comparison between Ajax technology and traditional Web applications SUN Qi liang (School of Science,Jinan University,Jinan250022,China) Abstract:Ajax technology is a tre mendous improvement of the browser and server.It is also an important indicator of Web2.0era.It uses the idle processing power of client to reduce the burden on servers and bandwidth,and then the user interaction has become smooth and continuous.This paper introduces the working principle of Aja x and the difference between traditional Web applications and Aja x.Finally,a section of the source code is given. Key w ords:HTML;Ajax;JSP;JavaScript 0 引言 Aja x即异步JavaScript和XML,是Web2.0中的一项关键技术,它允许把用户和Web页面间的交互与Web浏览器和服务器间的通信分离开来。传统的Web应用允许用户填写表单(form),当提交表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单,然后返回一个新的网页。这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。如果严重超过响应时间,服务器干脆告诉用户页面不可用。另外,某些时候,如果只是想改变页面一小部分的数据,那么如何不必重新加载整个责面,减少用户等待的时间是亟待解决的问题。现在,这个问题基本得到了解决,除了更优秀的程序设计、编码优化和调整服务器之外,还可以采用Ajax技术。1 Ajax的工作原理与传统的Web应用不同,Ajax采用异步交互过程。Ajax在用户与服务器之间引入一个中间介质,消除了网络交互过程中的处理、等待等缺点。相当于在用户和服务器之间增加了一个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转移到客户端,利用客户端闲置的处理能力,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。传统Web应用程序和Ajax程序工作原理如图1所示。图1左侧图形为传统Web程序工作原理,此时服务器端承担大量的工作,客户端只有数据显示的功能。右侧图形为Ajax应用程序工作原理图,客户收稿日期:2009-07-13 作者简介:孙启良(1980-),男,讲师,在职硕士研究生,主要研究方向为计算机网络和计算机体系结构。 108</p><h2>JION数据格式详解</h2><p>JSON 数据格式解析和XML 一样，JSON 也是基于纯文本的数据格式。由于JSON 天生是为JavaScript 准备的，因此，JSON 的数据格式非常简单，您可以用JSON 传输一个简单的String，Number，Boolean，也可以传输一个数组，或者一个复杂的Object 对象。 String，Number 和Boolean 用JSON 表示非常简单。例如，用JSON 表示一个简单的String " abc "，其格式为："abc",除了字符"，\，/ 和一些控制符（\b，\f，\n，\r，\t）需要编码外，其他Unicode 字符可以直接输出。 Boolean 类型表示为true 或false 。此外，JavaScript 中的null 被表示为null，注意，true、false 和null 都没有双引号，否则将被视为一个String 。 JSON 还可以表示一个数组对象，使用[] 包含所有元素，每个元素用逗号分隔，元素可以是任意的Value，例如，以下数组包含了一个String，Number，Boolean 和一null:["abc",12345,false,null]</p><p>Object 对象在JSON 中是用{} 包含一系列无序的Key-Value 键值对表示的，实际上此处的Object 相当于Java 中的Map<String, Object>，而不是Java 的Class 。注意Key 只能用String 表示。例如，一个Address 对象包含如下Key-Value： city:Beijing street:Chaoyang Road postcode:100025（整数）用JSON 表示如下：{"city":"Beijing","street":" Chaoyang Road ","postcode":100025}其中Value 也可以是另一个Object 或者数组，因此，复杂的Object 可以嵌套表示，例如，一个Person 对象包含name 和address 对象，可以表示如下：{"name":"Michael","address": {"city":"Beijing","street":" Chaoyang Road ","postcode":100025}} JavaScript 处理JSON 数据上面介绍了如何用JSON 表示数据，接下来，我们还要解决如何在服务器端生成JSON 格式的数据以便发送到客户端，以及客户端如</p><h2>jQuery与JavaScript各自实现AJAX异步请求验证</h2><p>jQuery和JavaScript分别实现AJAX异步请求验证 AJAX概述 1.什么是Ajax？ Ajax是由Jesse James Garrett创造的，是“Asynchronous JavaScript + XML 的简写”。 2.Adaptive Path公司的Jesse James Garrett 这样定义Ajax： Ajax不是一种新技术，而是一种新的理念。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。 Ajax包含：基于XHTML和CSS标准的表示；使用Document Object Model进行动态显示和交互；使用XMLHttpRequest与服务器进行异步通信；使用JavaScript绑定一切。 3. 与传统的Web应用不同，AJAX采用异步交互过程。（1）.AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。（2）.用户的浏览器在执行任务时即装载了AJAX引擎。 AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP 的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。 3.核心对象—XMLHttpRequest，XMLHttpRequest详解参考 https://www.wendangku.net/doc/f618998790.html,/xmldom/dom_http.asp XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。一、用户名校验服务器返回简单文本数据Ajax实例 1. 页面代码(checkUsername.html) Html代码 1. 2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 3. "https://www.wendangku.net/doc/f618998790.html,/TR/html4/loose.dtd"> 4.<html> 5.<head> 6.<title>用户名校验</title></p><h2>使用AJAX提交Form表单</h2><p>使用AJAX提交Form表单的方法，其中主要的就是ajaxForm()和ajaxSubmit()，ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象，它包含了如下一些属性与值的集合： Options对象的详解： 1.)target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery 选择器字符串，一个jQuery对象，或者一个DOM元素。默认值：null。 2.)url 重写或者指定表单的'action'属性。默认值：表单的action属性值 3.)type 重写或者指定表单的'method' 属性,"GET"或"POST"。默认值：表单的method属性值（如果没有找到默认为“GET”）。 4.)beforeSubmit 表单提交前被调用的回调函数，该方法通常被提供来运行预提交逻辑或者校验表单数据。如果"beforeSubmit"回调函数返回false，那么表单将不被提交。"beforeSubmit"回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据： [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 默认值：null 5.)success 表单成功提交后调用的回调函数。如果提供"success"回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。默认值：null 6.)dataType 期望服务器的的回应的类型。null、"xml"、"script"或者"json"其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持： 'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定，将传回responseXML值 'json'：如果dataType == 'json'，服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。 'script'：如果dataType == 'script'，服务器响应将求值成纯文本。默认值：null（服务器返回responseText值） 7.)semantic 布尔标志，表示数据是否必须严格按照语义顺序来进行提交。注意：一般来说，表单已经按照语义顺序来进行了串行化（或序列化），除了type="image"的input 元素。如果你的服务器有严格的语义要求，以及表单中包含有一个type="image"的input元素，就应该将semantic设置为true。</p><h2>jQuery中$.ajax解析xml、json格式数据</h2><p>jQuery中$.ajax解析xml、json格式数据 $.ajax()方法参数详解： url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。注意：这个要访问url必须与js文件在同一个域，否则会报错。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。 cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。 data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，jQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。 dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery 将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。 beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数}</p><h2>PHP jQuery Ajax 提交表单form详解</h2><p>PHP jQuery Ajax Form 表单提交实例解析，包括创建一个表单 html 页面、添加 JQuery 代码、 jquery ajax 表单提交、 jquery ajax 表单验证、反馈信息给用户， php ajax 表单验证，php ajax 提交表单，php ajax form 验证，php ajax 提交 form 。本实例用到 JQuery 类库本身的函数和功能，所有表单信息利用 PHPMailer 类库邮件的形式发送。 1、创建一个表单 html 页面表单部分 html 代码<br>以下为引用内容： <div id="contact_form"> <form name="contact" method="post" action=""> <fieldset> <label for="name" id="name_label">姓名</label> <input type="text" name="name" id="name" size="30" value="" class="text-input" /> <label class="error" for="name" id="name_error">此项必填</label> <label for="email" id="email_label">您的 Email</label> <input type="text" name="email" id="email" size="30" value="" class="text-input" /> <label class="error" for="email" id="email_error">此项必填</label> <label for="phone" id="phone_label">您的联系电话</label> <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <label class="error" for="phone" id="phone_error">此项必填</label> <br /> <input type="submit" name="submit" class="button" id="submit_btn" value=" 我要发送" /> </fieldset> </form> </div><br>这里用一个 id 为 contact_form 来包含整个包含信息；这是有意义的，稍后在 JavaScript 与用户交互信息的时候会用到，这里 form 标签的属性里面既包含了 method 和 action ；这个意义其实不大，因为 Javascript 直接操作 DOM ，所以没有这两个属性也是可以的；务必要给用户输入的 input 标签加独立的 id ，这和第二点原理类似。否则，无法看到正常的效果。 2、添加 JQuery 代码这里假设你已经从 JQuery 官方网站上下载了 JQuery 基库，然后上传到了你的 WEB 服务器，并添加到你要使用的网页中。<br><br></p><h2>$.ajax()方法详解</h2><p>$.ajax()方法详解各位读友大家好！你有你的木棉，我有我的文章，为了你的木棉，应读我的文章！若为比翼双飞鸟，定是人间有情人！若读此篇优秀文，必成天上比翼鸟！ $.ajax()方法详解1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。4.async:要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。5.cache:要求为Boolean类型的参数，默认为true（当dataType为script 时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。6.data:要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get 请求中将附加在url后。防止这种自动转换，可以查看processData 选项。对象必须为key/value格式，例如{foo1:”bar1”,foo2:”bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,”bar2”]}转换为&foo=bar1&foo=bar2。7.dataType:要求为String类型的参数，预</p></div> </div> <div> <div>相关文档</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="7667793"><a href="/topic/7667793/" target="_blank">ajax详解</a></li> </ul> </div> </div> </div> </div> <div class="category"> <span class="navname">相关文档</span> <ul class="lista"> <li><a href="/doc/8515459943.html" target="_blank">jQ ajax用户无刷新登录方法详解</a></li> <li><a href="/doc/bb12891080.html" target="_blank">使用AJAX提交Form表单</a></li> <li><a href="/doc/025468557.html" target="_blank">ajax与php结合实现用户登录(详解)</a></li> <li><a href="/doc/4a15485002.html" target="_blank">JQuery中$.ajax()方法参数详解</a></li> <li><a href="/doc/ab2129311.html" target="_blank">Ajax解析xml</a></li> <li><a href="/doc/e55689692.html" target="_blank">PHP jQuery Ajax 提交表单form详解</a></li> <li><a href="/doc/2b10528867.html" target="_blank">jQuery调用AJAX异步操作超清晰教程</a></li> <li><a href="/doc/8913812311.html" target="_blank">JavaScript、Ajax典藏级学习资料</a></li> <li><a href="/doc/b57435146.html" target="_blank">jQuery与JavaScript各自实现AJAX异步请求验证</a></li> <li><a href="/doc/062345158.html" target="_blank">jQuery Ajax 全解析(.ajax .post .get)</a></li> <li><a href="/doc/4b4293462.html" target="_blank">JQuery中的AJAX详解</a></li> <li><a href="/doc/9b18780818.html" target="_blank">Ajax技术与传统Web应用的比较</a></li> <li><a href="/doc/ce18709045.html" target="_blank">Ajax2_使用Ajax发送异步请求</a></li> <li><a href="/doc/1e6126453.html" target="_blank">PHP JQUERY AJAX 提交表单FORM详解</a></li> <li><a href="/doc/712683584.html" target="_blank">JQueryAjax教程讲解</a></li> <li><a href="/doc/ab16856490.html" target="_blank">JION数据格式详解</a></li> <li><a href="/doc/f618998790.html" target="_blank">$.ajax()方法详解</a></li> <li><a href="/doc/308445453.html" target="_blank">Ajax2_使用Ajax发送异步请求</a></li> <li><a href="/doc/9c12980645.html" target="_blank">XMLHttpRequest详解</a></li> <li><a href="/doc/cc539768.html" target="_blank">jQuery中$.ajax解析xml、json格式数据</a></li> </ul> <span class="navname">最新文档</span> <ul class="lista"> <li><a href="/doc/0719509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0e19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9319184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/db19211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/af19240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9919184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8b19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8019195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7a19336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6719035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6a19035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4d19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3a19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2519396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2419396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1f19338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ef19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bc19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "ffd0bce76bdc5022aaea998fcc22bcd126ff42d0"; </script> <div class="footer"> <p><a href="/tousu.html" target="_blank">侵权投诉</a>  © 2013-2023 www.wendangku.net  <a href="/sitemap.html">站点地图</a> | <a href="https://m.wendangku.net">手机版</a></p> <p><a href="https://beian.miit.gov.cn" target="_blank">闽ICP备11023808号-7</a>  本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈</p> </div> <script type="text/javascript">foot();</script> </div> </body> </html>