ajax学习篇9
|
对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+"/"; %> <!DOCTYPEHTML PUBLIC "-//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; publicclassMyServlet extends 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>
<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> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |