Ajax实现原理

    AJAX是"Asynchronous([eɪˈsɪŋkrənəs])JavaScript and XML",即异步JavaScript和XML,是一种创建交互式网页应用的网页开发技术。

Ajax 的工作

  Ajax直觉认识:我们发送一个请求,但是这个请求比较特殊它是异步的,也就是说客户端是不会感觉到的。在发送这个请求的时候我们绑定了一个事件,这个事件会监控我们发送请求的状态,并且每次状态改变都会触发,所以我们就可以根据不同的状态让他执行不同的操作。请求到达服务器端后,服务器端根据相应的请求返回对应的信息,这个返回信息我们可以取得并且是异步得到,不会引起客户端刷新。既然在上面已经绑定了监控状态变化的事件,我们就可以在那里首先做好在得到返回信息后要做的处理(当然如果失败也会有相应的状态,我们也会做出相应的处理),通过javascript在客户端操作返回的数据。

Ajax 核心—XMLHttpRequest

  上面我们大概感受了一下Ajax的过程,我们发现发送异步请求才是核心,事实上它就是XMLHttpRequest,整个Ajax之所以能完成异步请求完全是因为这个对应可以发送异步请求的缘故。而且我们又发现上面那个事件就是整个处理过程的核心,可以根据不同状态执行不同操作,其实它就是XMLHttpRequest的方法onreadystatechange,它在每次状态发生改变时都会触发。那么是谁取得的返回信息呢?它就是XMLHttpRequest的另一个方法responseText(当然还有responseXML)。我们还没有说发送给谁以及执行发送操作,这两个就是XMLHttpRequest的open和send方法。其他的当然还有了,我们直接列出来吧:

XMLHttpRequest 对象

 

属性

 说明

readyState

请求状态,开始请求时值为0直到请求完成这个值增长到4

0——(未初始化)还没有调用send()方法

1——(载入)已调用send()方法,正在发送请求
2——(载入完成)send()方法执行完成,已经接收到全部响应内容
3——(交互)正在解析响应内容
4——(完成)响应内容解析完成,可以在客户端调用了

responseText

目前为止接收到的响应体,readyState<3此属性为空字符串,=3为当前响应体,=4则为完整响应体

responseXML

服务器端相应,解析为xml并作为Document对象返回

status

服务器端返回的状态码,=200成功,=404表示“Not Found”

statusText

用名称表示的服务器端返回状态,对于“OK”为200,“Not Found”为400

方法

 

SetRequestHeader()

向一个打开但是未发生的请求设置头信息

open()

初始化请求参数但是不发送

send()

发送Http请求

bort()

取消当前相应

etAllResponseHeaders()

把http相应头作为未解析的字符串返回

getResponseHeader()

返回http相应头的值

事件句柄

 

onreadystatechange

每次readyState改变时调用该事件句柄,但是当readyState=3有可能调用多次


总结如下:
readyState  状态说明
(0)未初始化
  此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。
(1)载入
  此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成
  此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互
  此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成
  此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。
概而括之,整个XMLHttpRequest对象的生命周期应该包含如下阶段:
创建-初始化请求-发送请求-接收数据-解析数据-完成

在具体应用中,明确了readyState的五个状态(XMLHttpRequest对象的生命周期各个阶段)的含义,就可以消除对Ajax核心的神秘感 ,迅速把握其实质,对减少学习中的挫折感和增强自信心都极其有益。


属性status的含义:

0**:未被始化 1**:请求收到,继续处理

2**:操作成功收到,分析、接受

3**:完成此请求必须进一步处理

4**:请求包含一个错误语法或不能完成

5**:服务器执行一个完全有效请求失败


Get和Post的区别

  Get方式:
   用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。因此,在某些情况下,get方法会带来严重的安全性问题。

  Post方式:
   当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。

  总之,GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。

使用Post方式需注意:
1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用
XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例:

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18,注意var name=update.php?

abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的;
3.参数在Send(参数)方法中发送,例: xmlHttp.send(name); 如果是get方式,直接 xmlHttp.send(null);

GET和POST方式乱码解决方案

1如果是POST方式:

var  url=encodeURI(encodeURI("name=高晓&age=23"));

服务器端:String name =URLDecoder.decode(request.getParameter("name"),"UTF-8");

如果参数用send发送则不需要处理  send("name=高晓&age=23");

2如果是GET方式:

  xmlHttp.open("GET",true);

  xmlHttp.send(null);

服务器端

String name  = new String(request.getParameter("name").getBytes("ISO-8859-1"),"UTF-8");

<script type="text/javascript">
		xmlHttpRequest = null;
		//创建XMLHttpRequest对象
		function newXMLHttpRequest()
		{
			if(window.XMLHttpRequest)//除IE浏览器的其他浏览器
			{
				xmlHttpRequest = new XMLHttpRequest();
			}
			else if(window.ActiveXObject)//IE浏览器
			{
				try
				{
					xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");
				}
				catch(e1)
				{
					try{
						xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
					}catch(e2)
					{

					}	
				}	
			}
			return xmlHttpRequest;
		}
		//与服务器通讯
		
		function takeToServer()
		{
			newXMLHttpRequest()
			if(xmlHttpRequest!=null)
			{
				var url = "TestServlet?name=高晓";
				xmlHttpRequest.onreadystatechange = callbackHander;
				xmlHttpRequest.open("POST",true);
				xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xmlHttpRequest.send(null);
			}
		}
		function callbackHander()
		{
			if(xmlHttpRequest.readyState == 4)
			{
				if(xmlHttpRequest.status == 200)
				{
					//responseText为String类型
					var responseText = xmlHttpRequest.responseText;
					//把responseText变成对象
					var jsonObject = eval("(" +responseText +")");//eval只接收原始字符串
					for(var i=0;i<jsonObject.length;i++)
					{
						var name = jsonObject[i].name;
					}
				}
			}
		}
	</script>

public void doPost(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException {
		//若list中对象属性有引用类型
		List list = new ArrayList();
		JsonConfig jsonConfig = new JsonConfig();
		jsonConfig.registerJsonValueProcessor(java.util.Date.class,(JsonValueProcessor) (new DateJsonValueProcessor("yyyy-MM-dd")));
		JSONArray jsonArray = JSONArray.fromObject(list,jsonConfig);
		response.getWriter().println(jsonArray.toString());
		//若没有
		List list = new ArrayList();
		JSONArray jsonArray = JSONArray.fromObject(list);
		response.getWriter().println(jsonArray.toString());
	}
package com.jxd.util;

import java.text.SimpleDateFormat;
import java.util.Date;

import net.sf.json.JsonConfig;
import net.sf.json.processors.JsonValueProcessor;

public class DateJsonValueProcessor implements JsonValueProcessor
{
	private String format = "yyyy-MM-dd";

	public DateJsonValueProcessor()
	{
		
	}

	public DateJsonValueProcessor(String format)
	{
		this.format = format;
	}

	public Object processArrayValue(Object value,JsonConfig jsonConfig)
	{
		String[] obj = {};
		if (value instanceof Date[])
		{
			SimpleDateFormat sf = new SimpleDateFormat(format);
			Date[] dates = (Date[]) value;
			obj = new String[dates.length];
			for (int i = 0; i < dates.length; i++) 
			{
				obj[i] = sf.format(dates[i]);
			}
		}
		return obj;
	}

	public Object processObjectValue(String key,Object value,JsonConfig jsonConfig)
	{
		if (value instanceof Date) 
		{
			String str = new SimpleDateFormat(format).format((Date) value);
			return str;
		}
		return value.toString();
	}

	public String getFormat()
	{
		return format;
	}

	public void setFormat(String format)
	{
		this.format = format;
	}
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded 如果想发送不
form表单提交的几种方式 表单提交方式一:直接利用form表单提交 html页面代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;title&gt;Ins
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册。以上操作,对于用户体验方面来说是比较“差劲”的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时_用户注册 实时异步检测
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。一、 引言毫无疑问,AJAX已经成为当今Web开发中一种强有力的用户交互技术,但是它的许多可能性应用仍然鲜为人知。在本文中,我们将来共同探讨如何 使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将_ajax技术可行性
文章浏览阅读2.2k次。/************************** 创建XMLHttpRequest对象 **************************/function CreateRequest(){ var xmlObj = null; try { xmlObj = new XMLHttpRequest(); } catch(e) {
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖 掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有 空闲的对象,则使用此对象,否则将创建一个新的对象。下面是我最近写的一个简单的类:* XMLHttpReques_xmlhttprequest发送多个请求
文章浏览阅读3.1k次。Ajax 同一页面如何同时执行多个 XMLHTTP 呢,比如博客页,需要同时利用 Ajax 读取作者信息、文章信息、评论信息……我们的第一反应可能是创建多个全局 XMLHTTP 对象,但这并不现实。其实实现方式非常简单,就是给 onreadystatechange 对应的回调函数加上参数,以下代码是解决方案中一个函数中的一段代码。xmlhttp.open("GET", "ajax_proc_ajax响应多个mxl文件
文章浏览阅读1.5k次。数据岛指的是存在Html网页中的xml代码段,它在Html中形成了一个数据的集合,数据岛允许我们在Html网页中集成xml,对xml编写脚本.数据岛有它特有的形式,由标记xml开始,在开始标记中要有一个ID属性,用于指定该指定数据岛的名称。 (当然要以/xml结束).元素xml包含的内容就是xml代码。数据岛也分为2种:1)内嵌的数据岛形式2)外嵌的数据岛形式说了那么多废话,还_数据中岛计算模式
文章浏览阅读2.1k次。AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣,才想起学习一下了 Jquery. 随着WEB2._jquery ajax asp.net 认证
文章浏览阅读1.7k次。前段时间在用google map api的函数库的时候,发现里面的downloadUrl函数非常好用,所以自己写了一个。用腻了那些什么框架什么池,到头来发现越简单的东西越是适合我这种懒人。downloadUrl(url, callback, data);参数说明: url不用说了; callback是回调函数,函数调用的时候会有两个参数:data, responseCode,data就_xmlhttprequest downloadurl
文章浏览阅读956次。前些时间写了几篇关于XMLHTTP运用的实例.(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)近来看论坛上经常有人提问关于如何无刷新,自动更新数据.传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.我们可以让程序自动刷新.定时_后端xml怎么实现数据有救新增,没有就更新
文章浏览阅读3.3k次。 XMLHttpRequest调用XMLHttpRequest Call ●●●调用,回调,下载,抓取,实时,查询,远程通信(Remoting),远程通信脚本(RemoteScripting),同步,上传,XMLHttpRequest图6-2:XMLHttpRequest调用 目标故事Reta正在一个批发商网站上购买商品。每次她添加一个商品到购物车时,web站点发出_createxmlhttpre
文章浏览阅读1.3k次。function clearitem(){ var drp1 = document.getElementById("drp1"); while(drp1.options.length>0) { drp1.options.remove(0); } }//动态更改方法(根据城市代码取得该市商业区并添加到DropDownList中_dropdownlist根據動態變化
文章浏览阅读1.9k次。因為 Json.net 是有附原始碼的,他也附了單元測試的專案,底下是我額外增加的UnitTest,我的目標就是讓底下的測試可以pass,而且原來的Test 也要都能通過。 ValueTypeTest.csusing System;using NUnit.Framework;namespace Newtonsoft.Json.Test { [TestFixture] public cl_vb 無效的 json 基本型別
文章浏览阅读844次。利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htm_xmlhttp取源码没有更新
文章浏览阅读1.8k次。Json.Net 無法序列基本型別(string, int),Asp.Net Ajax 無法正確序列日期,AjaxPro序列出我不想要的_type字串 1. Json.Net 是我最常使用的序列/反序列json套件,標榜速度快,對於一對多關係的object 也都能正常運作, 己能滿足我平日的需要,但前幾天突然有個情況,我要序列的是一個泛型參數,該參數不一定是物object型別,有可能是st_token string in state start
文章浏览阅读1.3k次。转载自:http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html众 所周知,UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获,并且使用 XMLHttpRequest对象发送内容,然后服务器端由ScriptMan_web.ui.updatepanel 和 updatepanel 的区别
文章浏览阅读1.9k次。有些时候,只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器DOWN整个页面,导致各种资源的浪费。使用数据岛技术可以很好的解决这个问题:通过定时器或用户事件触发数据岛(XML对象)象服务器获取数据,在数据获取完成后,适时更新相关数据。示例HTML部分:http://localhost/WebService/LoadData/FeaturedService.asmx/GetScore_web数据岛
文章浏览阅读1k次。在页面上使用ActiveXObject的代价是很大的,如果我们的无刷新页面使用xmlhttp技术,我们或许需要频繁的建立xmlhttp对象,当然 我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信,而对于异步方式xmlhttp通信将 会出现问题。由于没有了进程的堵塞,用户可能再次调用同一个xmlhttp实例,如果这时前一个通信未完成,那么就
文章浏览阅读998次。 by Lokesh Dhakar 译: croc查看原文概要:Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松的导航它们 视觉特效: 奇特的自适应调整 向后兼容: yes! 点击这里查看实例_on lightbox 2 by lokesh dhakar