AJAX入门

什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

 

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

为了应对所有的现代浏览器,包括 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方法:

属性:
readyState:类型short;只读
responseText:类型String;只读
responseXML:类型Document;只读
status:类型short;只读
事件处理器:
onreadystatechange
readystate的属性:
 

就绪状态码

说    明

0

XMLHttpRequest对象没有完成初始化

即:刚刚创建。

1

XMLHttpRequest对象开始发送请求

调用了open方法,但还没有调用send方法。请求还没有发出

2

XMLHttpRequest对象的请求发送完成

send方法已经调用,数据已经提交到服务器,但没有任何响应

3

XMLHttpRequest对象开始读取响应,还没有结束

收到了所有的响应消息头,但正文还没有完全收到

4

XMLHttpRequest对象读取响应结束

一切都收到了

 
 

statusHTTP的状态码

        

 

状态码

说    明

200

服务器响应正常

400

无法找到请求的资源

403

没有访问权限

404

访问的资源不存在

500

服务器内部错误

 

responseText:获得响应的文本内容 

responseXML:获得响应的XML文档对象 documednt

 

注:就绪状态是4而且状态码是200,才可以处理服务器数据

 

 

案例实现:

 邮箱验证:

将创建XMLHttpRequest()的方法放在一个js文件中。

createXMLHttp.js

register.jsp

servlet文件:

 

 案例2:搜索

1、编写显示数据的容器div

2、实现ajax响应数据

//创建XMLHttpRequest对象

//通过事件调用回调函数处理响应结果,

//创建一个服务器连接

//发送请求

 

数据容器:

 

页面:

 

servlet文件:

 

 

 

 

 

posted @ 2017-07-11 23:48  白夜梦想家  阅读(151)  评论(0编辑  收藏  举报