• 使用XMLHttpRequest对象


    1.创建XMLHttpRequest对象,需要添加跨浏览器支持

    1 if(window.XMLHttpRequest){
    2                 //code for IE7+,Firefox,Chrome,Opera,Safari
    3                 xmlhttp = new XMLHttpRequest();
    4             }else{
    5                 //code for IE6,IE5
    6                 xmlhttp = new ActiveXObjext("Microsoft.XMLHTTP");
    7             }

    2.向服务器发送请求

    1 xmlhttp.open("GET","ajax.jsp",true);
    2             xmlhttp.send();

    open(method,url,async),规定请求的类型,URl以及是否异步处理请求

      method:请求的类型;GET或POST

      url:文件在处理器上的位置

      async:true(异步)或false(同步)

    send(String),讲请求发送到服务器

      String:仅适用于POST请求

    GET还是POST ?

      与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

      然而,在以下情况中,请使用 POST 请求:

        无法使用缓存文件(更新服务器上的文件或数据库);

        向服务器发送大量数据(POST 没有数据量限制);

        发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠。

    3.XMLHttpRequest对象的常用属性

    onreadystatechange属性:用于指定状态改变时所触发的事件处理器

    readyState属性:用于获取请求的状态:

      0:未初始化 1:正在加载 2:已加载 3:交互中 4:完成

    responseText属性:用于获取服务器的相应,表示为字符串

    responseXML属性:用于获取服务器的相应,表示为XML。这个对象可以解析为DOM对象

    status属性:用于返回服务器的HTTP状态码:

      200:表示成功 202:表示请求被接受,但尚未成功 400:错误的请求 404:文件尚未找到 500:内部服务器错误

    statusText:返回HTTP状态码对应的文本,如OK或Not Found(未找到)等

    script代码如下:

     1 <script type="text/javascript">
     2         function loadXMLDoc(){
     3             var xmlhttp;
     4             if(window.XMLHttpRequest){
     5                 //code for IE7+,Firefox,Chrome,Opera,Safari
     6                 xmlhttp = new XMLHttpRequest();
     7             }else{
     8                 //code for IE6,IE5
     9                 xmlhttp = new ActiveXobjext("Microsoft.XMLHTTP");
    10             }
    11             xmlhttp.onreadystatechange = function(){
    12                 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    13                     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    14                 }
    15             }
    16             xmlhttp.open("GET","ajax.jsp",true);
    17             xmlhttp.send();
    18         }
    19     </script>

    body代码如下:

    1 <body>
    2     <h4>AjaxDemo</h4>
    3     <button type="button" onclick="loadXMLDoc()">请求数据</button>
    4     <div id="myDiv"></div>
    5   </body>
  • 相关阅读:
    ci框架与smarty的整合
    jQuery 1.3.2 简单实现select二级联动
    Nginx配置https
    tp5.1最新的类库使用规则
    Linux指令大全
    Redis锁机制处理高并发
    Nginx配置https站点
    vue的入门
    HTTP 请求头中的 X-Forwarded-For,X-Real-IP
    Composer包制作以及发布!
  • 原文地址:https://www.cnblogs.com/xiaochaozi/p/3373122.html
Copyright © 2020-2023  润新知