Ajax记录

Ajax简介

　　在传统的Web应用中，每次请求服务器都会生成新的页面，用户在提交请求后，总是要等待服务器的相应。如果前一个请求没有得到相应，则后一个请求就不能发送。由于这是一种独占式的请求，因此如果服务器相应没有结束，用户就只能等待或者不断的刷

　　　　新页面。在等待期间，由于新的页面没有生成，整个浏览器将是一片空白，而用户只能继续等待。对于用户而言，这是一种不连续的体验。同时，频繁的刷新页面也会使服务器的负担加重。

　　Ajax(Asynchronous JavaScript and XML)技术就是为了弥补以上的不足而诞生的。Ajax是一种无刷新技术，由JavaScript、XML、CSS等技术整合而成。

　　Ajax的执行流程是，用户界面触发时间调用JavaScript，通过Ajax引擎——XMLHttpRequest对象异步发送请求到服务器，服务器返回XML、JSON或HTML等格式的数据，然后利用返回的数据使用DOM和CSS技术局部更新用户界面。

　　Ajax的的关键元素包括以下内容：

　　　　1.JavaScript语言：Ajax技术的主要开发语言。

　　　　2.XML/JSON/HTML等：用来封装请求或相应的数据格式。

　　　　3.DOM(文档对象模型)：通过DOM属性或方法修改页面元素，实现页面局部刷新。

　　　　4.CSS：改变样式，美化页面效果，提升用户体验度。

　　　　5.Ajax引擎：即XMLHttpRequest对象，以异步方式在客户端与服务器端之间传递数据。

XMLHttpRequest 对象

　　XMLHttpRequest 用于在后台与服务器交换数据。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

　　创建 XMLHttpRequest 对象的语法：

　　　　XMLHttpRequest = new XMLHttpRequest();

　　老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

　　　　XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

　   为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

　　　　var xmlhttp;

　　　　if (window.XMLHttpRequest)

　　　　{// code for IE7+, Firefox, Chrome, Opera, Safari

  　　　　xmlhttp=new XMLHttpRequest();
  　　}
　　　else
  　　{// code for IE6, IE5
  　　　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  　　}

　　如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

　　　　xmlhttp.open("GET","test1.txt",true);

　　　　xmlhttp.send();

　　GET 请求：

　　　　xmlhttp.open("GET","demo_get.asp",true);

　　　　xmlhttp.send();

　　　　但get请求得到的可能是缓存的结果。

　　　　为了避免这种情况，需要向 URL 添加一个唯一的 ID：

　　　　　　xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

　　　　　　xmlhttp.send();

　　　　通过 GET 方法的URL发送信息：

　　　　　　xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

　　　　　　xmlhttp.send();

　　POST 请求：

　　　　xmlhttp.open("POST","demo_post.asp",true);

　　　　xmlhttp.send();

　　　　如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定发送的数据：

　　　　　　xmlhttp.open("POST","ajax_test.asp",true);

　　　　　　xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

　　　　　　xmlhttp.send("fname=Bill&lname=Gates");

　　　　　　其实使用post发送请求的话，servlet中可以用request.getParameter(name)获取值。

　　当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：

　　请求成功后获取相应数据

　　　　xmlhttp.onreadystatechange=function()

　　　　{

 　　 　　if (xmlhttp.readyState==4 && xmlhttp.status==200)
   　  　　{
    　　　　document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    　　　}
  　　}

jQuery Ajax 操作函数

服务器返回数据

　　使用Ajax请求之后，如果请求的数据是复杂数据类型的话，服务器需要将数据包装一下。

　　使用FastJSON可以很好的完成这个工作。