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方法:
就绪状态码 |
说 明 |
0 |
XMLHttpRequest对象没有完成初始化 即:刚刚创建。 |
1 |
XMLHttpRequest对象开始发送请求 调用了open方法,但还没有调用send方法。请求还没有发出 |
2 |
XMLHttpRequest对象的请求发送完成 send方法已经调用,数据已经提交到服务器,但没有任何响应 |
3 |
XMLHttpRequest对象开始读取响应,还没有结束 收到了所有的响应消息头,但正文还没有完全收到 |
4 |
XMLHttpRequest对象读取响应结束 一切都收到了 |
status:HTTP的状态码
状态码 |
说 明 |
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文件: