zoukankan      html  css  js  c++  java
  • XMLHttpRequest实现Ajax异步请求

    一、XMLHttpRequest的方法

    方法 描述
    abort()                                                                                          停止当前请求
    getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
    getResponseHeader("header") 返回指定首部的串值
    open("method","url) 建立对服务器的调用。Method参数可以是GET、POST或PUT。URL参数可以是相对URL或绝对URL
    send(content) 向服务器发送请求
    setRequestHeader("header","value") 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()方法

    二、XMLHttpRequest的属性

    属性 描述
    onreadystatechange 每个状态改变都会触发这个事件处理器,通常会调用一个JavaScript函数
    readyState 请求的状态,有5个可取值:0=未初始化、1=正在加载、2=已经加载、3=交互中、4=完成。
    responseText 服务器的响应,表示为一个串
    responseXML 服务器的响应,表示为XML。这个对象可以解析为DOM对象
    status   服务器的HTTP状态码(200对应OK、404对应NOtFont等)
    statusText HTTP状态码的相应文本(OK或NotFount)  

    ①、onreadystatechange

    • 该事件处理函数由服务器发,而不是用户
    • 在Ajax执行过程中,服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的readyState 来实现。改变readyState属性是服务器对客户端连接操作的一种方式。每次readyState属性的改变都会触发onreadystatechange事件

    ②、send(data)

    • 若选用的是GET请求,则不会发送任何数据,给send方法传递null即可

    ③、setRequestHeader(header,value)

    • 如果用POST请求向服务器发送数据,需要将"Content-type"设置为“application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码了。
    • 该方法必须在open()之后才能使用

    ④、responseText

    • XMLHttpRequest的responseText 属性包含了从服务器发送的数据。它是一个HTML,XM或普通文本,这取决于服务器发送的内容。
    • 当readyState属性变为4时,responseText属性才可用,表明Ajax请求已经结束

    Demo

    • 检索helloAjax.txt文档中的内容
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <script type="text/javascript">
        window.onload=function(){
            //1.获取a节点,并为其添加onclick响应函数
            document.getElementsByTagName("a")[0].onclick=function(){
                 //3.创建一个XMLHttpRequest对象
                 var request=new XMLHttpRequest();
                 //4.准备发送请求的数据:url
                 var url=this.href +"?time="+new Date();
                 var method="GET";
                 //var method="POST"
                 //5.调用xmlhttprequest对象的open方法
                 request.open(method,url);
                 //request.setRequestHeader("ContentType","application/x-www-form-urlencoded");
                 //6.调用xmlhttprequest对象的send方法,get请求参数为null
                 request.send(null);
                 //request.send("name='aaa'");
                 //7.为xmlhttprequest对象添加onreadystatechange响应函数
                 request.onreadystatechange=function(){
                    //8.决断响应是否完成:xmlhttprequest对象的readystate属性值为4
                     if(request.readyState==4){
                        //9.再决断响应是否可用:xmlhttprequest对象status属性值为200
                         if(request.status==200){
                            //10.打印响应结果:responseText
                            alert(request.responseText);
                         }
                     }
                 }
                 //取消a节点的默认行为
                 return false;
            }
        }
        </script>
      </head>
      
      <body>
        <a href="helloAjax.txt">HelloAjax</a>
      </body>
    </html>
  • 相关阅读:
    数组_leetcode283
    数组_leetcode438
    数组_leetcode215
    数组_leetcode167
    数组_leetcode209
    数组_leetcode88
    数组_leetcode80
    数组_leetcode76
    数组_leetcode75
    数组_leetcode27
  • 原文地址:https://www.cnblogs.com/realshijing/p/8395243.html
Copyright © 2011-2022 走看看