Ajax与XML-12.27

2016-12-30 本文已影响0人 50153465fcd8

同步交互与异步交互

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

AJAX

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

AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
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

同步交互与异步交互

AJAX

ajax的异步交互步骤

XML

DOM解析XML字符串

猜你喜欢

热点阅读