XMLHttpRequest对象

最新推荐文章于 2022-04-25 13:17:43 发布

9_张晓

最新推荐文章于 2022-04-25 13:17:43 发布

阅读量1.3k

点赞数

分类专栏： AJAX javascript xml

本文链接：https://blog.csdn.net/ggibenben1314/article/details/17759625

版权

javascript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

AJAX

2 篇文章 0 订阅

订阅专栏

xml

2 篇文章 0 订阅

订阅专栏

一、什么是XMLHttpRequest

XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

二、XMLHttpRequest的创建

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
1、创建用作xmlhttprequest对象的xmlhttp变量，值设为空
 xmlhttp=null;
if (window.XMLHttpRequest)
  {2、创建适合firefox、opera、safari的xmlhttprequest对象
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {3、创建适合IE5或IE6的xmlhttprequest对象
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
   4、设置回调函数
   xmlhttp.onreadystatechange=state_Change;
   5、初始化http请求参数
   xmlhttp.open("GET",url,true);
   6.发送http请求参数
   xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}
//回调函数
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

三、实例：

说明:用户输入用户名后，会在页面中显示信息，不用重新加载页面

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <input type="text" id="name"/>
        <input type="button" name="submit" value="验证用户名是否已经存在" οnclick="submit()">
        <div id="message"></div>
        <script type="text/javascript">
            var xmlhttp;
            function submit(){
                if(window.XMLHttpRequest){
                    xmlhttp = new XMLHttpRequest();
                    if(xmlhttp.overrideMineType){
                       xmlhttp.overrideMineType("text/xml");
                    }
                }else if (window.AciveXObject){
                    var MSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
                    for(var n=0;n<MSXML.length;n++){
                        try{
                            xmlhttp = new ActiveXObject(MSXML[n]);
                            break;
                        }catch(e){}
                    }   
                    }else{
                        alert("不能建立XMLHttpRequest对象");
                        return false;
                    }
                    var name=document.getElementById("name").value;
                    if(name == null || name == ""){
                        alert("用户名不能为空");
                    }
                    xmlhttp.open("GET","AJAX?name=" + name,true);
                    xmlhttp.onreadystatechange=callback;
                    xmlhttp.send(null);
                 }
                     //回调函数
                    function callback(){
                        //http响应已完成接收
                        if(xmlhttp.readyState == 4){
                               //由服务器返回信息成功
                               if(xmlhttp.status == 200){
                                var messageNode=document.getElementById("message");
                                messageNode.innerHTML=xmlhttp.responseText;
                                
                            }
                        }
                    }
                

        </script>
    </body>
</html>

服务器端代码:

   protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try  {
          String old=request.getParameter("name");
          if(old==null){
              out.println("用户名不能为空");
          }else{
              //String name=new String(old.getBytes("ISO8859-1"),"gb2312");
              String name=URLDecoder.decode(old,"utf-8");
              System.out.println(name);
              if(name.equals("zhangxiao")){
                 out.println("用户名[" + name + "]已经存在，请使用其他用户名");
              }else{
                  out.println("用户名[" + name + "]尚未存在，可以使用该用户名");    
              }
          }
        }finally{
            out.close();
        }
    }

运行结果：

1、输入用户名

2.点击按钮

四、属性说明

1、readyState

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。它的状态改变就会触发onreadystatechange函数。

表中给出了它的5个属性：

状态	名称	描述
0	Uninitialized	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置
1	Open	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	Send	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应
3	Receiving	所有响应头部都已经接收到。响应体开始接收但未完成
4	Loaded	HTTP 响应已经完全接收

2、responseText

从服务器接收到的文本

3、responseXML

从服务器接收到的xml

4、state

由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误

9_张晓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
16
评论
XMLHttpRequest对象

一、什么是XMLHttpRequest XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或
复制链接

扫一扫