《jquery框架ajax技术6》由会员分享，可在线阅读，更多相关《jquery框架ajax技术6（28页珍藏版）》请在金锄头文库上搜索。
1、第六章jQuery中的AJAX操作SSOFT V2.0回顾 工具函数 操作数组 常用操作SSOFT V2.0目标 AJAX基础 AJAX简单示例 jQuery中AJAX相关工具函数 通过jQuery完成AJAX操作 jQuery中的AJAX全局函数SSOFT V2.0AJAX简介 AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML） 是指一种创建交互式网页应用的开发技术 改善用户体验，实现五刷新效果SSOFT V2.0AJAX的优势 不需要插件支持 优秀的用户体验 提高Web程序的性能 减轻服务器和带宽的负担 SSOFT V2.0
2、AJAX的不足 浏览器对XMLHttpRequest对象的支持度 不足 破坏浏览器“前进”、“后退”按钮的正常功 能 对搜索引擎的支持不足 SSOFT V2.0创建请求对象XMLHttpRequest是AJAX的基础，表示请求对象。 XMLHttpRequest用于在后台与服务器交换数据。为了兼容浏览器，需要作判断 var xmlhttp; if(window.XMLHttpRequest) / code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); else / code for IE6, IE5
3、 xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP“); SSOFT V2.0请求对象常用方法方法描述open(method,url,async)规定请求的类型、URL 以及是否异步处 理请求。 1.method：请求的类型；GET 或 POST 2.url：文件在服务器上的位置 3.async：true（异步）或false（同步）send(string)将请求发送到服务器。 string：仅用于 POST 请求，表示传递 的参数，格式为key1=val1 通过GET方式发送请求xmlhttp.send(null); 如果需要像HTML表单那样 POST
4、 数据，请使用 setRequestHeader() 来 添加 HTTP 头。然后在 send() 方法中规定希望发送的数据 xmlhttp.open(“POST“,“test.jsp“,true); xmlhttp.setRequestHeader(“Content-type“,“application/x-www-form-urlencoded“); xmlhttp.send(“fname=Nina SSOFT V2.0跟踪进展和获得响应请求对象通过就绪状态处理程序通知自身的进展。可以通过将函数的引 用指派给请求对象的onreadystatechange属性作为就绪处理程序，从而 把这个处
5、理程序建立起来。 xmlhttp.onreadystatechange = function() if (xmlhttp.readyState = 4) if(xmlhttp.status = 200) 通过responseText属性获得响应文本document.getElementById(“myDiv“).innerHTML = xmlhttp.responseText; SSOFT V2.0完整AJAX示例代码var xmlhttp; if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); else xmlhttp=new Act
6、iveXObject(“Microsoft.XMLHTTP“); xmlhttp.open(“GET“,“test.jsp“,true); xmlhttp.onreadystatechange = function() if (xmlhttp.readyState = 4) if(xmlhttp.status = 200) alert(xmlhttp.responseText); xmlhttp.send(null); SSOFT V2.0serialize( ) 此方法根据包装集里所有的成功表单元素，创建正确格式化的、经 过URI编码的查询字符串。 function doSubmit() $
7、(“div“).html($(“form“).serialize(); 用户名： 性别：男 女 爱好： 爱好1 爱好2 爱好3SSOFT V2.0其他序列化方法 $.serializeArray( ) 此方法用于把所有成功表单控件的值都收集到 对象的数组中（包含控件的名称和值） $.param( ) 此方法是serialize()方法的核心，用来对一个 对象数组或对象按照key/value进行序列化。 SSOFT V2.0load()方法 此方法用于将服务器的资源加载到客户端 ，替换包装集中匹配元素的innerHTML属 性值。 load(url, parameters, callback)
8、第一个参数：字符串，表示服务器端资源的 URL 第二个参数：为一个对象，其属性被序列化为 正确地编码的参数以便传递到请求里 第三个参数：为一个回调函数，在响应数据已 经加载到包装集元素之后被调用 SSOFT V2.0load()方法示例jQuery中的load()方法为我们封装了AJAX发送的细节， 使我们的操作更加方便。如果需要传递参数和添加回调 函数，可以使用一下写法： $(“div“).load(“test.jsp“,name:“jack“,function(responseText,responseCode,req) ); SSOFT V2.0get() 和 post()方法 $.ge
9、t(url, parameters, callback) 以GET形式发送AJAX请求到后台 第一个参数：字符串，将要通过GET方法进行 交互的服务器端资源的URL 第二个参数：一个对象，其属性作为名值对用 于构造查询字符串并追加到URL 第三个参数：回调函数，在请求完成时被调用 。 post()方法的用法和get()方法一样，不同的是 发送数据的形式SSOFT V2.0get()方法示例下面的例子将文本框的数据序列化，调用get()方法发送 到后台，将响应内容显示在div元素中 function doSend() var param = $(“#txtUser“).serialize();
10、$.get(“test.jsp“,param,function(text) $(“#msg“).html(text); ); UserName:SSOFT V2.0ajax()方法一属性名数据类型描述url字符串请求的URLtype字符串请求的HTTP方法，通常是GET或POST，默认为GETdata对象表示需要发送的请求参数dataType字符串一个关键字，用来标识预 期将被响应所返回的数 据的类型，这个值决定在把数据传递给 回调函 数之前进行什么后续处理。有效值有：xml、 json、html、script、texttimeout数值设定请求超时时间 ，以毫秒为单位，如果请求在 超时值到期
11、之前仍未完成，则中止请求并且调 用错误回调函数global布尔型启用或禁用所谓全局函数的触发语法：$.ajax(options) ，其中options参数为一个对象，其属性如下表SSOFT V2.0ajax()方法二属性名数据类类型描述contentType字符串请求的内容类型success函数一个函数，如果请求的响应指示成功状态码，则 这个函数被调用。响应内容作为第一个参数被传 递给这 个函数error函数一个函数，如果请求的响应指示错误状态码，则 这个函数被调用。三个实参被传递给这 个函数： 请求对象、状态消息字符串、异常对象complete函数一个函数，如果请求的响应指示成功状态码，则
12、这个函数被调用。如果也指定了success或error回 调函数，则这个函数在success或error回调函数 调用之后被调用beforeSend函数一个函数，在发起请求之前被调用async布尔型指定是否为异步请求SSOFT V2.0ajax()方法示例ajax() 方法代码片段function doSend() $.ajax( url:“test.jsp“, type:“POST“, data:$(“#txtUser“).serialize(), success:function(responseText,status) appendStatus(status); $(“#msg“).ap
13、pend(responseText); , complete:function(req,status) appendStatus(“complete“); , beforeSend:function() appendStatus(“beforeSend“); ); SSOFT V2.0ajaxSetup()方法 $.ajaxSetup(properties) 用于设置一组默认的AJAX属性，如果不替换 值，则使用默认的AJAX属性。 属性的设定和ajax()方法中的参数一致SSOFT V2.0parseJSON()方法此方法接受一个JSON格式字符串，返回解析后的对象。 需要注意的是，传入一个
14、畸形的JSON格式字符串会抛出一个异常。 比如下面的都是畸形的JSON字符串：test: 1/test没有包围双引号 test: 1/使用了单引号而不是双引号 下面我们来看一个简单的例子，通过parseJSON()进行字符串解析： var stu = “stuName“:“Nina“,“stuAge“:22; var obj = $.parseJSON(stu); alert(obj.stuName + “ “ + obj.stuAge);/显示Nina 22 SSOFT V2.0getJSON()方法$.getJSON(url, param, callback)用法与get()和post()
15、方法一样，不同的是要求服务器返回的数据 为JSON格式字符串。 返回JSON格式字符串的后台页面：“name“:“Nina“,“age“:22 SSOFT V2.0getJSON()方法示例客户端代码编写发送AJAX请求解析JSON格式数据function doSend() var param = $(“#txtUser“).serialize(); $.getJSON(“test.jsp“,param,function(data) $(“#msg“).append(data.name); $(“#msg“).append(“:“); $(“#msg“).append(data.age); )
16、; UserName:SSOFT V2.0全局函数方法名称说明ajaxStart(callback)在AJAX函数或命令发起时，但在请求对象被创建之前ajaxSend(callback)在请求对象创建之后，但在请求对象被发送到服务器之前ajaxSuccess(callback)在请求已从服务器返回之后，并且响应包含成功状态码ajaxError(callback)在请求已从服务器返回之后，并且响应包含失败状态码ajaxComplete(callback)在请求已从服务器返回之后，并且在任何已声明的 ajaxSuccess或ajaxError回调函数已被调用之后ajaxStop(callback)在所有其他AJAX处理完成以及任何其他适用的全局回调函 数已被调用之后SSOFT V2.0总结 AJAX基础 A
