AJAX

最新推荐文章于 2025-03-16 10:00:00 发布

原创最新推荐文章于 2025-03-16 10:00:00 发布 · 486 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax

本文详细介绍了AJAX的工作原理和技术组成，包括JavaScript、XML、CSS等，并深入探讨了XMLHttpRequest对象的属性和方法。通过一个具体的示例展示了如何使用AJAX进行页面无刷新的数据提交与获取。

概念：

AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术

Ajax组成:

1. JavaScript – 是工具，操作ajax的工具。

2. XML – 传递数据的工具，也可以用JSON.

3. CSS – 显示样式.

4. 核心类：XMLHttpRequest – 在浏览器中集成的Ajax核心对象。

XMLHttpRequest成员

属性

onreadystatechange*	指定当readyState属性改变时的事件处理句柄。只写
readyState	返回当前请求的状态，只读.
responseBody	将回应信息正文以unsigned byte数组形式返回.只读
responseStream	以Ado Stream对象的形式返回响应信息。只读
responseText	将响应信息作为字符串返回.只读
responseXML	将响应信息格式化为Xml Document对象并返回，只读
status	返回当前请求的http状态码.只读
statusText	返回当前请求的响应行状态，只读

readyState:变量，此属性只读，状态用长度为4的整型表示.定义如下：

0 (未初始化)	对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化)	对象已建立，尚未调用send方法
2 (发送数据)	send方法已调用，但是当前的状态及http头未知
3 (数据传送中)	已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成)	数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

status:

返回当前请求的http状态码

长整形标准http状态码，定义如下：

Number	Description
100	Continue
101	Switching protocols
200	OK
201	Created
202	Accepted
203	Non-Authoritative Information
204	No Content
205	Reset Content
206	Partial Content
300	Multiple Choices
301	Moved Permanently
302	Found
303	See Other
304	Not Modified
305	Use Proxy
307	Temporary Redirect
400	Bad Request
401	Unauthorized
402	Payment Required
403	Forbidden
404	Not Found
405	Method Not Allowed
406	Not Acceptable
407	Proxy Authentication Required
408	Request Timeout
409	Conflict
410	Gone
411	Length Required
412	Precondition Failed
413	Request Entity Too Large
414	Request-URI Too Long
415	Unsupported Media Type
416	Requested Range Not Suitable
417	Expectation Failed
500	Internal Server Error
501	Not Implemented
502	Bad Gateway
503	Service Unavailable
504	Gateway Timeout
505	HTTP Version Not Supported

* 表示此属性是W3C文档对象模型的扩展.

方法

abort	取消当前请求
getAllResponseHeaders	获取响应的所有http头
getResponseHeader	从响应信息中获取指定的http头
open	创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
send	发送请求到http服务器并接收回应
setRequestHeader	单独指定请求的某个http头

ajax能做什么工作：

1：Ajax的核心工作就是页面无刷新提交数据。

2：实现页面与服务器交互的导步功能。

a) 在不同的浏览器创建同一个对象

i. XMLHttpReqeust。-用JS来创建这个对象。

ii. Ie6创建方式： var xhr = new ActivexObject(“Microsoft.XMLHttp”);

其他的所有浏览器: ie7以上，Chrome,FF,Opare

Var xhr = newXMLHttpReqeust();

示例：用ajax的xhr对象访问后台的servlet获取一个数据

1.主页 index.jsp 开发一个页面，要示页面不刷新的情况下，获取到生成数据，放到文本框中

<body>

<inputtype="text"name="rand">

<buttononclick="_get();">GET获取</button><br/>

<inputtype="text"id="name">

<buttononclick="_post();">POST</button>

</body>

<scripttype="text/javascript">

//在外面创建一个xhr对象

var xhr =null;

try {

xhr= new XMLHttpRequest();

} catch (e) {}

if(!xhr){

xhr = new ActiveXObject("Microsoft.XMLHttp");

}

function _post(){

var url ="<c:urlvalue='OneServlet'/>";

xhr.open("POST",url,true);

//post需要设置头

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//容易忘记

//注册事件

xhr.onreadystatechange=function(){

if(xhr.readyState==4){//请求完成了吗

if(xhr.status==200){

alert("OKOK...");

document.getElementById("name").value=xhr.responseText;

}else{

alert("你出错了"+xhr.status+","+xhr.statusText);

}

};

var nm = document.getElementById("name").value;

//声明参数

var param ="name="+nm+"&addr=山东省";

//发送请求

xhr.send(param);

}

function _get(){

//声明url

var url ="<c:url value='OneServlet?name=张三'/>";

url =encodeURI(url);

//准备向后边发请求

xhr.open("GET",url,true);

//设置xhr对象的回调

xhr.onreadystatechange=change;

//正式向后发请求

xhr.send(null);

}

//写一个方法监听xhr的比变化

function change(){

//xhr的四个状态

//0.还没有初始化

//1.已经new且调用了open

//2.准备发送请求了

//3.发送请求完成了

//4.请求都成功，且接收到了数据

//xhr还可以获取到服务器状态码200，404，500

if(xhr.readyState==4){

//判断状态码是否是200

if(xhr.status==200){

//获取服务器返回的数据

var back =xhr.responseText;//获取服务器返回的txt

//var back =xhr.responseXML;//获取服务器返回的xml数据

document.getElementsByName("rand")[0].value=back;

}

</script>

2.开发后台的servlet

public class OneServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest request, HttpServletResponseresponse)throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

Random ran = new Random();

int a = ran.nextInt(100);

//获取通过get提交的数值

String name = request.getParameter("name");

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

//返回值给页面

response.getWriter().print("你好:"+name+",get数值是："+a);

}

public voiddoPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException {

request.setCharacterEncoding("UTF-8");

response.setContentType("text/html;charset=UTF-8");

Random ran = new Random();

int num =ran.nextInt(100);

String name =request.getParameter("name");

String addr =request.getParameter("addr");

//返回值给页面

response.getWriter().print(name+","+addr+"post的随机数是："+num);

}