Ajax的使用

最新推荐文章于 2019-05-21 21:21:19 发布

wangjian_an

最新推荐文章于 2019-05-21 21:21:19 发布

阅读量873

点赞数

分类专栏： javaEE框架相关网页制作 javaEE——框架技术文章标签： javascript ajax xml 异步

本文链接：https://blog.csdn.net/wangjian_an/article/details/52291282

版权

javaEE框架相关同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

网页制作

16 篇文章 0 订阅

订阅专栏

javaEE——框架技术

15 篇文章 7 订阅

订阅专栏

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对象。

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。
作用：通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
ajax对象参考：
属性：

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

方法：

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

两个重要类状态信息：
readyState

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

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

status

长整形标准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 Conflic 
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

使用步骤：

    1创建一个ajax对象(XMLHttpResquest)
    2设置通讯方式和地址(open)
    3设置访问成功后的 js对象(回调函数)(onreadystatechange)
    4发送（post.get）(send)

下面是详细代码演示：
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">
        function check1(obj){
            //先进行数据格式检验--这里省了
            var name=obj.value;
             //1创建一个ajax对象//xmlHttp.
             //IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。
            var xhr=null;
            if(window.XMLHttpRequest){//ie7 Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。
                xhr=new XMLHttpRequest();
            }else{//老版本
                xhr=new ActiveXObject("Microsoft.XMLHttp");
            }

             var url="<c:url value='/OneServlet?name="+name+"'/>";
              //2 设置通讯方式和地址
             xhr.open("GET", url, true);//false异步--多线程
             //xhr.open("GET", url, false);//false同步--单线程
              //3 设置访问成功后的 js对象(回调函数)
              xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var text=xhr.responseText;
                        alert("服务器返回"+text);
                        succ1(text);
                    }else{
                         alert("服务器响应出错信息,错误代码:"+xhr.status);
                    }
                }   
              };
              //4发送---Get方式，没有参数(请求体) ---数据在请求地址中
              xhr.send(null);
              alert("OKOK");//同步时，必须等到ajax回来之后才会执行。异步时不用等
        }
        function succ1(obj){
            div1.innerHTML=obj;
        }
        function check2(obj){
            var name=obj.value;

             //1创建一个ajax对象//xmlHttp.
             var xhr=null;
             if(window.XMLHttpRequest){//ie7 Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。
                xhr=new XMLHttpRequest();
            }else{//老版本
                xhr=new ActiveXObject("Microsoft.XMLHttp");
            }

            //2 设置通讯方式和地址
             var url="<c:url value='/OneServlet' />";

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

             xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var text=xhr.responseText;
                        alert("服务器返回"+text);
                        succ2(text);
                    }else{
                         alert("服务器响应出错信息,错误代码:"+xhr.status);
                    }

                }
             };
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//POST要设置响应头,而且要放在响应之后

             //4发送---Post方式，有参数(请求体) <---数据 ※
             xhr.send("name="+name);
             alert("OKOK");//同步时，必须等到ajax回来之后才会执行。异步时不用等
        }
        function succ2(obj){
             div2.innerHTML=obj;
        }
    </script>
  </head>

  <body>
        <h3>演示Ajax技术</h3>
        <pre>
     Ajax技术介绍:
          全称: Asynchronized(异步) Javascript And Xml
          技术组成: Javascript、DOM、CSS 和 XMLHttpRequest (ActiveXObject)
  readyState
    0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 
    1 (初始化) 对象已建立，尚未调用send方法 
    2 (发送数据) send方法已调用，但是当前的状态及http头未知 
    3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 
    4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 
        </pre>

    <form action="">
        GET姓名1:<input type="text" name="name" onblur="check1(this)"><br/>
        <div id="div1"></div><br/>
        POST姓名2:<input type="text" name="name" onblur="check2(this)"><br/>
        <div id="div2"></div><br/>
    </form>
  </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 {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String name=request.getParameter("name");
        SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        out.println(name+"你好，来访时间是:"+sdf.format(new Date()) );
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
//      out.close();

    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String name=request.getParameter("name");
        int i=100/0;//故意让后台响应500的错误信息
        SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        out.println(name+"你好，来访时间是:"+sdf.format(new Date()) );
    }

}

封装的ajax工具

function Ajax(){
    this.get=function(url,succ1,failure){
        var http=this.getHttp();
        http.open("GET",url,true);
        http.onreadystatechange=function(){
            if(http.readyState==4){
                if(http.status==200){
                    var text=http.responseText;
                    alert(text);
                    succ1(text);
                }else{
                    if(failure){
                        failure(http.status);
                    }
                }
            }   
          };
          http.send(null);
    };
    this.post=function(url,param,succ2,failure){
        var http=this.getHttp();
        http.open("post",url,true);
        http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        http.onreadystatechange=function(){
            if(http.readyState==4){
                if(http.status==200){
                    var text=http.responseText;
                    alert(text);
                    succ1(text);
                }else{
                    if(failure){
                        failure(http.status);
                    }
                }
            }   
          };
          http.send(param);
    };

    this.getHttp=function(){//生成ajax对象
        if(window.XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject("Microsoft.XMLHttp");
        }
    };
};

wangjian_an

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax的使用

XmlHttp是什么？最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.
复制链接

扫一扫