Ajax记录

Posted 2020-10-01 南橘

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();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

 

 

 

 

 

 

 

 

　　

　　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 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

 

 

 

 

 

 

 

 

 

 

 

 

　　请求成功后获取相应数据

　　　　xmlhttp.onreadystatechange=function()

　　　　{

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

jQuery Ajax 操作函数

函数	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

服务器返回数据

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

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