ajax学习篇9

来源：互联网发布：数学必修三编程软件编辑：程序博客网时间：2024/05/29 18:44

对ajax工作原理：

下面这段是来自一个网友的blog:　

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

　XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

　所以我们先从XMLHttpRequest讲起，来看看它的工作原理。

　首先，我们先来看看XMLHttpRequest这个对象的属性。

　　它的属性有：

　　onreadystatechange 每次状态改变所触发事件的事件处理程序。

　　responseText 从服务器进程返回数据的字符串形式。

　　responseXML 从服务器进程返回的DOM兼容的文档数据对象。

　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

　　status Text 伴随状态码的字符串信息

　　readyState 对象状态值

　　　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

　　　　1 (初始化) 对象已建立，尚未调用send方法

　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

看了上面的一段话我们知道了，ajax的原理。

所以对于ajax开发步骤应该是：

1. 创建对象

2. 打开服务器

3. 发送数据

4. 接受服务器的数据相应。

下面做一个简单例子用get方式的实现和servlet的一个交互：这个是一个index.jsp

<%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPEHTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<basehref="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>

<scripttype="text/javascript"src="js/fish.js"></script>

</head>

<body>

<inputid="mybutton"type="button"value="加载数据"/>

</body>

</html>

第二个是fish.js

window.onload = function() {

function createXMLHttpRequest() {

var xmlhttp=null;//请求对象

try {//IE浏览器中创建此对象

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {//IE浏览器中创建此对象

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

try {

// Firefox, Chrome, Opera, Safari浏览器中创建此对象

xmlhttp = new XMLHttpRequest();

if (xmlhttp.overrideMimeType) {

xmlhttp.overrideMimeType("text/xml");

}

} catch (e) { alert("浏览器不支持xmlHttpRequest!"); }

}

return xmlhttp;

}

document.getElementById("mybutton").onclick =function() {

//得到xmlhttprequest对象

var xmlreq=createXMLHttpRequest();

xmlreq.onreadystatechange=function(){//每次状态改变都会调用这个函数

alert(xmlreq.readyState);

alert(xmlreq.status);//如果返回200就说明请求成功了。

}

//打开与服务器的连接

xmlreq.open("get","servlet/MyServlet",true);//在第二个参数后可以跟着一些数据的。

//发送数据

xmlreq.send(null);//如果是get方式那么必须是null

}

3servlet代码

package com.fish;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

publicclassMyServletextends HttpServlet {

publicvoid doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

PrintWriter out = response.getWriter();

System.out.println("**************");

// String a= request.getParameter("fish");

// System.out.println(a);

}

5. 这个是servlet在xml的配置

<?xmlversion="1.0"encoding="UTF-8"?>

<web-appversion="2.5"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<display-name></display-name>

<servlet-name>MyServlet</servlet-name>

<servlet-class>com.fish.MyServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>MyServlet</servlet-name>

<url-pattern>/servlet/MyServlet</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>