Ajax_JSON_jQuery.doc

Ajax 1.ajax是什么？ asynchronous javascript and xml：异步的javascript和xml 是为了解决传统web应用当中“发送请求-等待响应”这种模式的弊端【浏览器在发送完请求之后，只能等待服务器的响应，用户不能做其它的操作，浏览器发送完请求，会抛弃整个页面，等待服务器返回新的页面，也就是说，浏览器和服务器之间交互的数据量很大，不能够做到按需获取数据】而创建的技术。该技术的本质是：通过浏览器内置的 一个对象(XmlHttpRequest)异步地向服务器发送请求，（所谓异步，指的是浏览器并没有抛弃整个页面，用户仍然可以操作原有的页面，也就是，不是通过表单提交的方式向服务器发送请求），服务器在处理完请求之后，返回数据给XmlHttpRequest对象，通过javascript可以获取XmlHttpRequest中的数据，然后，使用该数据更新页面。整个过程当中，用户不用等待服务器的响应。 传统的交互方式：表单提交发请求，浏览器①将表单中的数据打包发送给服务器②将DOM树销毁，等待服务器返回一个新的页面。浏览器与服务器之间的交互是通过一个一个的页面进行的，显然这样会导致数据量很大。 2. ajax编程 ① XmlHttpRequest对象 该对象由浏览器实现（该实现并没有标准化），在创建该对象时，要区分浏览器。 1)如何创建该对象 var xmlHttpRequest = null; if ((typeof XMLHttpRequest) != undefined) //非IE浏览器 { xmlHttpRequest = new XMLHttpRequest( ); } else { //IE浏览器 xmlHttpRequest = new ActiveXObject(Microsoft.XMLHttp); } 通过实践发现新版本的IE也实现了XmlHttpRequest对象！ 2)该对象的重要属性 responseText：获取服务器响应的文本数据。 responseXml：获取服务器响应的xml数据。 status：获取服务器返回的状态码(比如200)。 readyState：获取XmlHttpRequest与服务器通讯的状态(0,1,2,3,4,分别描述不同的状态)。 0 ：(未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 1 ：(初始化) 对象已建立，尚未调用send方法 2 ：(发送数据) send方法已调用。 3 ：(数据传送中)已接收部分数据，此时，数据不完整。 4 ：(响应结束)，此时，可以通过responseText/responseXml获取数据了。 ②编程步骤： step1 获取XmlHttpRequest对象 step2 使用XmlHttpRequest对象 发送请求： 1). get请求 var url=some?username=zs; xmlHttpRequest.open(get, url, true); //建立连接 get：请求方式，可以是get/post，大小写都可以。 url：请求的地址,如果有请求参数，加在url之后。 true：表示发送的是异步请求。false表示同步请求，跟表单提交一样。 xmlHttpRequest.onreadystatechange = fun1; /*在fun1函数中获取数据，更新界面*/ /* 注册一个回调函数，用于处理服务器的响应。*/ /* fun1监听readstatechange事件，xmlHttpRequest对象与服务器通讯过程当中，会经 历5个状态，每当状态发生改变，就会产生该事件。可以在fun1中，编写代码更新页面。*/ xmlHttpRequest.send(null); //发送数据 //只有调用send方法，才开始发送数据。 //对于get请求，参数必须是null。 2). post请求 与get请求步骤基本一样， xmlHttpRequest.open(POST,url,true); xmlHttpRequest.setRequestHeader(Content-Type,application/x-www-form-urlencoded); 因为post方式提交需要http请求数据包。