Ajax与XML-12.27

同步交互与异步交互

1.客户端向服务端发送请求，直到服务器端进行响应，这个过程中，用户是不能做任何其他事的（需要等）
2.客户端向服务端发送请求，直到服务端进行响应，这个过程中，用户是可以做其他事情的（不用等）

AJAX

1.asynchronous javascript and xml,直译中文为javascript和xml的异步

  1. AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
  2. 服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
    4.Ajax的核心对象
    XMLHttpRequerst对象
    5.获取XMLHttpRequest对象
    function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
    //除IE外的其他浏览器
    xhr = new XMLHttpRequest();
    }else{
    xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
    }
    6.属性
  • readyState 请求状态
  • 0 尚未初始化
  • 1正在发送请求
  • 2请求完成
  • 3请求成功，正在接受数据
  • 4数据接收成功
  • status 请求响应值
  • 200 表示请求成功
  • 202 请求被接受但处理未完成
  • 400 错误的请求
  • 404 资源未找到
  • 500 内部服务器错误，如asp代码错误等
  • responseText 服务器返回的文本
  • responseXML 服务器返回的xml，可以当做DOM处理
    7.方法
  • 与服务端建立连接
    open(method,url)
    向服务器端发送请求
    send()
    取消请求
    abort()
    得到响应的所有http头
    getAllResponseHeaders()
    获取指定的http头
    getResponseHeader()
    指定请求的Http头
    setRequestHeader()
    8.事件
    onreadystatechange事件
    作用 - 监听服务端的通信状态改变

ajax的异步交互步骤

1.创建XMLHttpRequest核心对象
2.与服务区建立连接
使用XMLHttpRequest对象的open(method,url)
3.向服务器发送请求

  • 使用XMLRequest对象的send()方法
  • 请求参数的格式 - key=value

4.接受服务器响应的数据

  • 使用XMLHttpRequest对象的readystatechange事件监听服务器端的通信状态

  • 使用XMLHttpRequest对象的readyState属性，判断服务器端当前状态(0-4)

  • 使用XMLHttpRequest对象的statue属性，判断服务器端的状态码(200)

  • 使用XMLHttp对象的responseText属性，接受服务器端的响应数据
    注意：get与post方式

  • get请求方式
    send()方法不起作用，但是不能被省略
    xhr.send(null) 请求参数，添加到url?key=value

  • post请求方式
    必须要在send()方法调用之前，使用setRequestHeader()方法设置请求头，参数为key-value
    代码示例：

  • html
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    用户名：<input type="text" id="user" name="us" />
    <button id="btn">提交</button>
    <div id="content" style="width: 100px;height:100px;border:1px solid black"></div>
    </body>
    <script type="text/javascript">
    document.getElementById("btn").onclick = function(){
    //将input中的内容异步提交到服务器，然后将服务器响应回来的内容，放到dav里面//

        //1.创建ajax对象
    var xhr = getXhr();
    // 2.跟服务器建立连接,open第三个boolean可以设置同步交互还是异步交互，默认为true，为异步交互，现在ajax已经慢慢的弃用同步交互
    var input = document.getElementById("user");
    //post方式提交参数是放到请求体中
    xhr.open("post","myPhp01.php");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    // 3.发送数据,格式为key=value,多个参数用&隔开
    xhr.send("user"+input.value);
    // 4.监听服务器的响应
    xhr.onreadystatechange = function(){
      //当数据接收完毕以及请求成功时
      if (xhr.readyState == 4 && xhr.status == 200) {
        //将响应的内容放到div里
        document.getElementById("content").innerHTML = xhr.responseText;
      }
    }
    function getXhr(){
      //设置一个空变量
      var xhr = null;
      //判断是否支持XMLHttpRequest
      if (window.XMLHttpRequest) {//支持非IE
        xhr = new XMLHttpRequest();
      } else{
        //不支持IE的方式
        xhr = new ActiveXObject("Microsoft.XMLHttp");
      }
      return xhr;
      }
    }
  </script>
  </html>

  • php
    <?php
    $user = $_POST["user"];
    echo $user."success";
    /application/x-www.form-urlencoded:窗体数据被编码为名称/值对时将字符串的键值对转换/
    ?>

XML

1.HTML/XHTML/DHTML/XML
HTML:网页文档
XHTML:更严格的网页文档
DHTML:DOM|BOM
XML:可扩展的标记语言，可用于配置文件|数据格式
2.XML的文件为.xml
3.XML的定义方式与HTML非常相似
HTML的元素都是预定义好的
XML允许自定义元素
4.XML版本
1.0版本 1.1版本，几乎没人使用
5.XML作用
作为数据格式-存储数据的地方
6.XML语法

  • 声明
    <?xml version="1.0" encoding="utf-8" ?>
    version-设置XML文件的版本
    encoding-设置XML文件的编码
    声明必须出现在0行0列上
  • 定义元素
    根元素，必须是双标签，只能定义一个
    定义元素，元素名可以自定义，既可以双标签也可以是单标签

DOM解析XML字符串

1.创建DOM解析XML的解析器，解析器解析XML字符串

  • IE浏览器
    var parser = new ActiveXObject("Microsoft.XMLDOM");
    parser.async = false;
    xmlDoc = parser.loadXML(xmlFile);
  • 其他游览器
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(xmlFile,"application/xml");

2.解析XML元素与解析HTML元素一致
获取元素最常用的是getElementsByTagName很少使用ById和ByName
代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script type="text/javascript">
    function parserXML (xmlfile) {
      var xmlDoc=null;//先设置对象，用来保存解析出来的xml文档对象
      //获取解析器，用解析器解析xml文件或者xml格式字符串
      if(window.DOMParser){
        var parser=new DOMParser();
        //load用来解析xml文件，loadXML用来解析xml格式的字符串
        xmlDoc=parser.parseFromString(xmlfile,"text/xml");
        //或者xmlDoc=parser.parseFromString(xmlfile,"application/xml");
      }else{
        var parser=new ActiveXObject("Microsoft.XMLDOM");
        parser.async=false;
        xmlDoc=parser.loadXML(xmlfile);
      }
      return xmlDoc;
      }
      var xmlDoc=parserXML("<province class='jiangxi'>江西省</province>");
      console.log(xmlDoc);
      var sheng=xmlDoc.getElementsByTagName("province")[0];
      var className=xmlDoc.getElementsByTagName("province")[0].getAttribute("class");
      console.log(sheng.innerHTML);
      console.log(className);
    </script>
    </body>
   </html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • XMLHttpRequest
    Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是...
    changxiaonan阅读 2,259评论 0赞 2
  • AJAX原理与CORS跨域
    ajax作为前端开发必需的基础能力之一，你可能会使用它，但并不一定懂得其原理，以及更深入的服务器通信相关的知识。在...
    萧玄辞阅读 839评论 0赞 0
  • 你不知道的 XMLHttpRequest
    本文详细介绍了 XMLHttpRequest 相关知识，涉及内容： AJAX、XMLHTTP、XMLHttpReq...
    semlinker阅读 13,712评论 2赞 18
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,837评论 18赞 139
  • 什么是Ajax（Ajax的来历、运行原理、优缺点及其它）
    大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师...
    大大头大阅读 7,798评论 1赞 72