AJAX(1)

前端之家收集整理的这篇文章主要介绍了AJAX(1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax是asynchronous JavaScript and xml(异步JavaScript 和 xml)的缩写,是一套实现网页局部和服务器进行数据交互的技术标准,有很多的实现手段:可以手写,可以用框架(dwr),用Jquery等。

XMLHttpRequest对象

XMLHttpRequest是Ajax的基础(IE5和IE6 用ActivexObject),用于在后台和服务器进行数据交换,可以在不重新加载页面的情况下,对页面的局部进行数据更新。创建一个XMLHttpRequest对象:
var xmlhttp ;
if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
}else{
      xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
}
为了保证浏览器的兼容性,需要检查浏览器是否支持XMLHttp。

XMLHttpRequest请求

创建好XMLHttpRequest对象后,如果需要将请求发送到服务器,就要用到XMLHttpRequest的open()和send()方法
方法 描述
open(method,url,async)
规定请求的类型,URL和是否异步处理请求
send(String)
将请求发送到服务器,POST方法中使用String参数

发送请求代码
//get方法
xmlhttp.open("get","a.jsp",true);
xmlhttp.send();
//post方法
xmlhttp.open("post",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xml.send("name=abao&pass=123");

open是初始化请求的参数,send发送请求,和服务器建立连接。 
方法 描述
setRequestHeader(header,value) 向请求添加HTTP头header是头的名称value是头的值

XMLHttpRequest响应

如果要得到服务器响应的信息就要用到XMLHttpRequest的responseText()和responseXML()方法
属性 描述
responseText 获得字符形式的响应数据
responseXML 获得XML形式的响应数据

XMLHttpRequest readyState

当请求发送到服务器后,我们要执行一下基于响应状态的任务,readyState有请求的状态信息,每当readyState改变的时候都会触发onreadystatechange事件。下面是XMLHttpRequest的3个重要属性
属性 描述
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("xx").innerhtml=xmlhttp.responseText();
   }
}

一个示例:

其中要注意的东西:

  • 1.responseText是XMLHttpRequest的一个属性,不是方法
  • 2.responseXML也是XMLHttpRequest的一个熟悉,不是方法,通常要解析。
  • 3.HTML元素的innerHTML属性,好久没写生了。
  • 4.判断浏览器是否支持XMLHttpRequest,是window.XMLHttpRequest
  • 5.异步JavaScript通常会涉及到页面元素的改变,所以写ajax,对元素的操作要熟练。

手写的ajax程序好像只能向页面或者Servlet发送请求,对于一个J2ee工程,我们有时候会向一个javabean发送请求获得操作的结果

不知道手写的可不可以,希望高手指点。

未完待续。

附工程












版权声明:本文为博主原创文章,未经博主允许不得转载。

猜你在找的Ajax相关文章