jQuery开发基础教程第7章 Ajax在jQuery中的应用.ppt

7.3 通过JavaScript应用Ajax 【例7-1】 通过传统JavaScript的Ajax方式从服务器端获取文本 （1）声明一个空对象来保存XMLHttpRequest对象，代码如下： var xmlhttp = null; （2）创建XMLHttpRequest对象，代码如下： function createXMLHttpRequest(){ if(window.ActiveXObject){ // IE浏览器 xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); }else if(window.XMLHttpRequest){ // 非IE浏览器 xmlhttp = new XMLHttpRequest(); } } （3）编写startRequest()方法，使用open()方法初始化XMLHttpRequest对象，指定HTTP方法和要使用的服务器URL，代码如下： var url = index.php; // 要使用的服务器URL 默认情况下，使用XMLHttpRequest对象发送的HTTP请求是异步的，但是可以显式把async参数设置为true。 （4）XMLHttpRequest对象提供了用于指定状态改变时所触发的事件处理器的属性onreadystatechange。在AJAX中，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。当请求状态改变时，XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器。因此，在处理该响应之前，事件处理器应该首先检查readyState的值和HTTP状态。当请求完成（readyState值为4）并且响应已经成功（HTTP状态值为200）时，就可以调用一个JavaScript函数来处理该响应内容，代码如下： xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 xmlhttp.status == 200){ alert(xmlhttp.responseText); } } （5）使用send()方法提交请求，因为请求使用的是HTTP的get方式，因此可以在不指定参数或使用null参数的情况下调用send()方法，代码如下： xmlhttp.send(null); （6）单击“获取服务端文本”按钮，可以看到网页上出现“我的第一个Ajax实例！”，运行效果如图7-13所示。 图7-13 通过JavaScript应用Ajax 7.4 jQuery中的Ajax应用 7.4.1 load()方法 7.4.2 使用$.get()方法请求数据 7.4.3 使用$.post()方法请求数据 7.4.4 $.getScript()方法加载js文件 7.4.5 $.getJSON()方法加载JSON文件 7.4.6 使用$.ajax()方法请求数据 7.4.7 serialize()方法序列化表单 7.4.1 load()方法 在传统的JavaScript中，需要使用XMLHttpRequest对象异步加载数据，而在jQuery中，使用load()方法可以方便快捷地实现获取异步数据的功能。它的语法格式为： load(url[,data][,callback]) 参数说明 url：请求HTML页面的URL地址。 data：可选参数。发送至服务器的key/value数据。 allback：可选参数。请求完成时的回调函数，无论请求是否成功 1．载入HTML文档 【例7-2】 使用load()方法载入页面 （1）首先创建要载入的文档mr.html，代码如下： div p明日科技/p p明日图书/p p明日编程词典/p /div （2）创建index.html页面，在页面上添加按钮以及id为“loadhtml”的div元素，代码如下： input type=button id=btn value=载入页面/ div id=loadhtml/div （3）引入jQuery库并且在下方编写jQuery代码，使用load()方法载入之前创建的mr.html页面，代码如下： script type=text/javascript src=../js/jquery-1.11.1.min.js/script script type=text/javascript $(document).ready(function(){ $(#btn).click(function(){ $(#loadhtml).load