Ajax与XML-12.27

作者: 50153465fcd8 | 来源:发表于2016-12-30 18:50 被阅读0次

同步交互与异步交互

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>

相关文章

  • Ajax与XML-12.27

    同步交互与异步交互 1.客户端向服务端发送请求,直到服务器端进行响应,这个过程中,用户是不能做任何其他事的(需要等...

  • Ajax实现登陆验证

    关于jquery与Ajax jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法,能...

  • AJAX简单总结

    一:AJAX是什么 AJAX是异步的 JavaScript 和 XML,ajax不是新的编程语言,ajax是与服务...

  • ajax

    特点 ajax ajax入门 ajax请求与发送数据 ajax工具类封装 type:请求类型url:请求地址dat...

  • PHP全栈学习笔记13

    php与ajax技术 web2.0的到来,ajax逐渐成为主流,什么是ajax,ajax的开发模式,优点,使用技术...

  • PHP全栈学习笔记13

    php与ajax技术 web2.0的到来,ajax逐渐成为主流,什么是ajax,ajax的开发模式,优点,使用技术...

  • AJAX

    AJAX  1.AJAX的的概念与意义   说到AJAX,那就不得不提AJAX的作用,提高用户体验。但是,这是大部...

  • Ajax基础

    1.AJAX(asynchronous javascript and xml)简介     AJAX 是与服务器交...

  • 前端(十七)

    ajax:ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原...

  • jQuery ajax 和 正则

    ajax ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原...

网友评论

    本文标题:Ajax与XML-12.27

    本文链接:https://www.haomeiwen.com/subject/afepvttx.html