Ajax技术(XMLHttp)

来源：互联网发布：板块分析软件编辑：程序博客网时间：2024/06/06 04:00

XmlHttp是什么？

最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。

现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

canAjaxWeb

web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app version="3.0" 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_3_0.xsd">  <display-name></display-name>  <servlet>    <servlet-name>OneServlet</servlet-name>    <servlet-class>cn.hncu.servlet.OneServlet</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>OneServlet</servlet-name>    <url-pattern>/OneServlet</url-pattern>  </servlet-mapping>  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list></web-app>

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>Ajax 技术</title>    <script type="text/javascript">    //GET方式的ajax请求    function check1(obj){    var name =obj.value;        //1. 创建一个ajax对象    var xhr=null;    //用下面这一段实现跨浏览器支持    if(window.XMLHttpRequest){//火狐、google、高版本IE    xhr=new XMLHttpRequest();    }else{//低版本IE    xhr=new ActiveXObject("Microsoft.XMLHttp");    }        //2. 设置请求方式(注：GET请求方式的参数在地址的后面)    var url="<c:url value='/OneServlet?name="+name+"' />";    xhr.open("get", url, true);//异步、以GET方式向后台请求    //xhr.open("get", url, false);//同步、以GET方式向后台请求        //3. 设置访问成功后的回调参数(一个js的函数对象) -------xhr.onreadystatechange属性指定的回调函数    xhr.onreadystatechange=function(){    //alert(xhr.readyState); 1 2 3 4    if(xhr.readyState==4){    if(xhr.status==200){    var text=xhr.responseText;    //alert(text);    succ(text);    }else{    alert("服务器响应出错信息,错误代码为："+xhr.status);    }    }    };        //4. 发送请求    xhr.send(null);//GET方式没有参数(请求体)   ---数据(请求参数)在地址栏url中    }    function succ(obj){    if(obj=="1"){    sp1.innerHTML="该用户已存在".fontcolor("red");    }else{    sp1.innerHTML=obj.fontcolor("green");    }    }    //POST方式的ajax请求    function check2(obj){    var name=obj.value;    var xhr=null;    if(window.XMLHttpRequest){    xhr=new XMLHttpRequest();    }else{    xhr=new ActiveXObject("Microsoft.XMLHttp");    }    var url="<c:url value='/OneServlet' />";//POST请求方式url不带参数    xhr.open("POST", url, true);        xhr.onreadystatechange=function(){    if(xhr.readyState=="4"){    if(xhr.status=="200"){    var text =xhr.responseText;    succ2(text);    }else{    alert("服务器响应出错信息,错误代码为："+xhr.status);    }    }    };    //以POST方式提交时必须设置请求头    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");        xhr.send("name="+name);//POST方式，有请求参数--------数据(请求参数)    }    function succ2(obj){    sp2.innerHTML=obj.fontcolor("blue");    }    </script>  </head>    <body>     <pre>    1.ajax 技术介绍：    全称：Asynchronized(异步) Javascript And Xml    技术组成：Javascript,DOM,CSS和XMLHttpRequest(ActiveXObject)对象    2.ajax的状态-------xhr.readyState属性：    0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 1 (初始化) 对象已建立，尚未调用send方法 2 (发送数据) send方法已调用，但是当前的状态及http头未知 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 3.ajax请求开启方法--------xhr.open(请求方式，url,是否为异步)    </pre>    <form action="">    <h3>GET方式的ajax演示</h3>    Name:<input type="text" name="name" onblur="check1(this)"/>    <span id="sp1"></span><br/>    Pwd:<input type="password" name="pwd"><br/>    Email<input type="text" name="email"><br/>    <br/><br/><br/><br/>        <h3>POST方式的ajax演示</h3>    Name2:<input type="text" name="name" onblur="check2(this)"/>    <span id="sp2"></span><br/>    Pwd2:<input type="password" name="pwd"><br/>    Email2<input type="text" name="email"><br/>    <input type="submit" value="注册">.    <br/><br/><br/><br/>    </form>    <a href="<c:url value='/jsps/ajaxDemo2.jsp' />">Ajax技术封装</a>    <br/><br/><br/><br/><br/><br/><br/><br/>  </body></html>

主页展示图：

OneServlet.java

package cn.hncu.servlet;import java.io.IOException;import java.io.PrintWriter;import java.text.SimpleDateFormat;import java.util.Date;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class OneServlet extends HttpServlet {private SimpleDateFormat sdf=new SimpleDateFormat("yyyy年MM月dd日  HH:mm:ss");public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");PrintWriter pw=response.getWriter();System.out.println("GET-Ajax  方式请求来啦......");String name=request.getParameter("name");/*这段代码是为了更好地看出ajax同步(浏览器必须等待后台的返回结果)与异步(互不影响)的区别try {Thread.sleep(3000);} catch (InterruptedException e) {e.printStackTrace();}*/if(name.startsWith("hncu")){pw.print("1");//pw.println("name 是合法的,"+sdf.format(new Date()));}else{pw.println("name 是非法的,"+sdf.format(new Date()));}}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");request.setCharacterEncoding("utf-8");PrintWriter pw=response.getWriter();System.out.println("POST-Ajax  方式请求来啦......");String name=request.getParameter("name");//int i=10/0;//这一句是为了演示当服务器响应代码不是200的情况---这个是500错误if(name.startsWith("hncu")){pw.println("name 是合法的,"+sdf.format(new Date()));}else{pw.println("name 是非法的,"+sdf.format(new Date()));}}}

GET方式ajax请求效果展示(POST方式也是如此，只不过POST方式支持中文)

Ajax封装技术：

ajaxDemo2.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>Ajax 技术</title>    <script type="text/javascript" src="<c:url value='/js/ajax.js' />"></script>    <script type="text/javascript">    //演示封装：GET方式的ajax请求    function check1(obj){    var name =obj.value;    var url="<c:url value='/OneServlet?name="+name+"' />";    var ajax = new Ajax();  ajax.get(url,succ,failure);    }    function succ(obj){    if(obj=="1"){    sp1.innerHTML="该用户已存在".fontcolor("red");    }else{    sp1.innerHTML=obj.fontcolor("green");    }    }    function failure(obj){    alert("服务器响应的错误信息代码:"+obj);    }    /////////////////以下演示POST方式的ajax//////////////////////////    //演示POST方式的Ajax请求    function check2(obj){    var data="name="+obj.value;    var url="<c:url value='/OneServlet' />";//POST请求方式url不带参数    var ajax=new Ajax();    ajax.post(url,data,succ2,failure);    }    function succ2(obj){    sp2.innerHTML=obj.fontcolor("blue");    }    </script>  </head>    <body>   <input type="button" value="函数封装技术演示" onclick="demo()">  <script type="text/javascript">  function demo(){  var p=new Person("Tom","25");  p.show();  p.setAge("9");  p.show();  }  function Person(name,age){  this.name=name;  this.age=age;  this.show=function(){  alert(this.name+",....."+this.age);  };  this.setAge=function(age){  this.age=age;  };  }  </script>    <form action="">    <h3>GET方式的ajax演示</h3>    Name:<input type="text" name="name" onblur="check1(this)"/>    <span id="sp1"></span><br/>    Pwd:<input type="password" name="pwd"><br/>    Email<input type="text" name="email"><br/>    <br/><br/><br/><br/>        <h3>POST方式的ajax演示</h3>    Name2:<input type="text" name="name" onblur="check2(this)"/>    <span id="sp2"></span><br/>    Pwd2:<input type="password" name="pwd"><br/>    Email2<input type="text" name="email"><br/>    <input type="submit" value="注册">.    <br/><br/><br/><br/>    </form>  </body></html>

ajax.js

function Ajax(){this.get=function(url,succ,failure){//1 创建一个ajax对象var xhr=null;//用下面这一段实现跨浏览器支持if(window.XMLHttpRequest){//火狐、google、高版本IExhr = new XMLHttpRequest();}else{//低版本IE  xhr = new ActiveXObject("Microsoft.XMLHttp");}//2 设置请求方式 xhr.open("GET",url,true);//异步、GET方式向后台的url(servlet的请求地址)发起请求//3 设置访问成功后的 回调函数(一个js的函数对象) ---xhr.onreadystatechange属性指定的回调函数。xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){var txt = xhr.responseText;  succ(txt);}else{failure(xhr.status);}}};//4 发送请求xhr.send(null);};this.post=function(url,data,succ2,failure){var xhr=null;if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}else{xhr=new ActiveXObject("Microsoft.XMLHttp");}xhr.open("POST", url, true);xhr.onreadystatechange=function(){if(xhr.readyState=="4"){if(xhr.status=="200"){var text =xhr.responseText;succ2(text);}else{failure(xhr.status);}}};//以POST方式提交时必须设置请求头xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send(data);//POST方式，有请求参数--------数据(请求参数)};}

主页图：

函数封装：

ajax封装：

0 0