12.28学习经验分享#

Bruce_Zhu于2016.12.29

一、同步交互与异步交互

客户端想服务器端发送请求，直到服务器端进行响应，这个过程中，用户是不能做任何其他事情的(等)
客户端想服务端发送请求，直到服务端进行响应，这个过程中，用户是可以做其他事情的(不用等)

二、AJAX

asynchronous javascript and xml,直译中文-javascript和xml的异步
AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
Ajax的核心对象

XMLHttpRequerst对象

获取XMLHttpRequest对象

function getXhr(){

var xhr = null;
if(window.XMLHttpRequest){
    //除IE外的其他浏览器
    xhr = new XMLHttpRequest();
}else{
    
    xhr = new ActiveXObject("Microsoft.XMLHttp");

}

return xhr;

}

属性
1. readyState 请求状态
```
0 尚未初始化
1正在发送请求
2请求完成
3请求成功，正在接受数据
4数据接收成功
```
1. status 请求响应值
  
  200 表示请求成功
  202 请求被接受但处理未完成
  400 错误的请求
  404 资源未找到
  500 内部服务器错误，如asp代码错误等
2. responseText 服务器返回的文本
3. responseXML 服务器返回的xml，可以当做DOM处理
方法

open(method,url) - 与服务端建立连接

send() - 向服务器端发送请求

abort() - 取消请求

getAllResponseHeaders()
得到响应的所有http头

getResponseHeader()
获取指定的http头

setRequestHeader()
指定请求的Http头
事件

onreadystatechange事件
作用 - 监听服务端的通信状态改变

当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件

三、实现ajax的异步交互步骤

创建XMLHttpRequest核心对象
固定写法-独立编写
与服务区建立连接
使用XMLHttpRequest对象的open(method,url)
向服务器发送请求
使用XMLRequest对象的send()方法
请求参数的格式 - key=value
接受服务器响应的数据

使用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

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

四、接收服务器端的响应数据

使用XMLHttpRequest核心对象的responseText属性

该属性只能接受文本(HTML)格式

问题：
解析过程比较复杂，而且在拼串或拆串过程容易出错
XML格式的数据
json格式的数据

五、XML

HTML/XHTML/DHTML/XML

HTML: 网页文档
XHTML:更严格的网页文档
DHTML:DOM|DOM
XML: 可扩展的标记语言，可用于配置文件|数据格式
XML的文件为.xml
XML的定义方式与HTML非常相似

HTML的元素都是预定义好的
XML允许自定义元素
XML版本

1.0版本 1.1版本，几乎没人使用
XML作用

作为数据格式-存储数据的地方

XML语法

1）声明

<?xml version="1.0" encoding="utf-8" ?>

version-设置XML文件的版本
encoding-设置XML文件的编码

声明必须出现在0行0列上

2）定义元素

根元素，必须是双标签，只能定义一个

定义元素，元素名可以自定义，既可以双标签也可以是单标签

练习：使用XML定义省份和城市信息

六、DOM解析XML字符串

创建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");

解析XML元素与解析HTML元素一致

获取元素最常用的是getElementsByTagName很少使用ById和ByName

PS：

 浏览器不允许读取外部的XML文件
 浏览器解析符合XML格式的字符串

七、Ajax的XML

1.请求的数据格式-XML

  1）客户端如何构建XML格式的数据

    构建的数据类型 - 字符串类型
    字符串的内容要符合XML格式的语法要求

  2）服务器端如何接受符合XML格式的数据

     接收到的客户端的请求数据 - 字符串类型，php集成了DOM的相关内容

       DOMDocument
       DOMElement
       DOMNode

2.响应的数据格式-XML

  1）服务器端如何构建符合XML格式的数据

    设置服务器端的响应头Content-Type值为text/xml

      header("Content-Type:text/xml");

    构建符合XML格式的数据内容

       手动方式构建字符串内容

       DOMDocument对象的方法
         loadXML(符合XML格式的字符串)
         saveXML()方式进行响应

  2）客户端如何接受XML格式的数据

      使用XMLHttpRequest对象的responseXML属性接收

      接收到的就是XML DOM对象(不需要进行解析)

NFH.010 - ajax基础与实践

NFH.010 - ajax基础与实践

12.28学习经验分享#

推荐阅读更多精彩内容