标签：and   图片   解析   本质   处理器   res   stat   ajax   成功   

1.AJAX简介

1. AJAX：Asynchronous JavaScript And XML；异步JavaScript和XML
2. 它是一种日渐流行的web编码格式，不是一种新的编码语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术，是基于JavaScript、XML、HTML、CSS 的新用法。
3. AJAX是一种用来改善用户体验的技术，本质是使用XMLHttpRequest对象 异步地像服务器发送请求，并且发送请求的同时浏览器并不销毁页面，可以继续进行页面的操作，在服务器收到请求之后会返回部分数据，而不是一个完整的页面。浏览器接收到这些部分数据之后会以页面无刷新的效果更改页面中的局部内容。

2.同步和异步

• 传统的web交互模式：同步
  • 同步：提交请求--等待服务器处理--处理完毕返回，这个期间客户端浏览器不能干任何事
  • 

     

     

• AJAX支持的web交互模式：异步
  • 异步：请求通过AJAX事件触发--交给服务器处理(浏览器仍然可以做其他事情)--处理完毕
  • 

3.AJAX编码步骤

（重要）

1. 创建XMLHttpRequest对象
2. 注册状态监控回调函数
3. 建立与服务器的异步连接
4. 发出异步请求

4.详解XMLHttpRequest

4.1创建XMLHttpRequest对象

• 不同的浏览器提供不同的支持
  • 所有现代浏览器(Chrome、Firefox、Safari、Opera以及IE7+)均内建XMLHttpRequest对象。
    • var xhr = new XMLHttpRequest();
  • 老版本的Internet Explorer(IE5、IE6)使用ActiveX对象
    • var xhr = new ActiveXObject("Microsoft.XMLHTTP");

• 代码示例：

• function getXHR(){
      var xhr;
      if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
      }else{
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return xhr;
  }

   

4.2XMLHttpRequest对象的属性

•  readyStatus：请求的状态，类型short,只读。
  • 0：XMLHttpRequest对象被创建了
  • 1：建立与服务器的连接，但是请求没有发出去。
  • 2：发出了请求，但是服务器没有任何响应
  • 3：接收到了服务器的响应，接收到了服务器发出的响应消息头时。
  • 4：接收到了服务器发送的响应正文，响应结束。
•  responseText：响应正文内容，字符串类型，只读。
•  responseXML：响应正文内容，可以当做DOM处理。类型Document，只读。
•  status：响应状态码，类型short，只读。
  • 200：请求成功。
  • 202：请求被接受但处理未完成
  • 400：错误的请求。
  • 404：资源未找到
  • 500：内部服务器错误
•  statusText：响应码描述，类型字符串，只读。

4.3XMLHttpRequest对象的方法

1.  abort():取消请求
2.  getAllResponseHeader():获取响应的所有HTTP头。字符串类型。
3.  getResponseHeader(var headerName)：获取指定的HTTP头。字符串类型。
4.  open(var method, var url, boolean isAnsy)建立连接
   1. method：请求方式(GET/POST)
   2. url：请求地址
   3. isAnsy：同步还是异步。默认是true，表示异步。
5.   send(var data )：向服务器发送请求消息头。
   1. GET请求，传入null
   2. POST请求，
6.  setRequestHeader（var headerName， var headerValue）向服务器发送请求消息头。

4.4XMLHttpRequest对象的状态监听器

• onreadystatechange：事件处理器
• 指向一个函数（回调函数）
• 触发时机：每次XMLHttpRequest对象的readyState发生变化都会触发。
• 示例代码：

  xhr.onreadystatechange = function(){
      if(xhr.readyState==4){
          if(xhr.status==200){
              //JavaScript 之 DOM、 BOM 编程
          }
      }
  }

   

5.服务器返回XML

5.1XStream简介

• XStream是一个简单类库，用来转换Java对象成为XML和转换XML成为Java对象。
• 官网：http://xstream.codehaus.org/
  
• 解析XML需要jar包
  • xstream-1.3.1.jar
  • xpp3_min-1.1.4c.jar（xml pull）

5.2使用XStream

• 创建XStream对象
• 将特殊类型进行别名设置 
  • xs.alias("provinces", List.class);
  • xs.alias("province", Province.class);
    　
•  将对象转为XML
  • String xml = xs.toXML(provinces);
    
•  XStream  Annotation
  • @XStreamAlias(aliasName)： 对类和变量设置别名。
  • @XStreamAsAttribute： 设置变量生成属性。
  • @XStreamOmitFiel： 设置变量不生成到 XML。
  • @XStreamImplicit(itemFieldName = "hobbies")： 设置集合类型变量别名。
    
    
• 在XStream生成XML时使用注解
  • xs.autodetectAnnotations(true);
    

 附录：参考页面：ajax：https://www.w3school.com.cn/ajax/ajax_intro.asp

　　　　xstream：https://baike.baidu.com/item/Xstream/7626000?fr=aladdin

AJAX

标签：and   图片   解析   本质   处理器   res   stat   ajax   成功   

原文地址：https://www.cnblogs.com/abug/p/11744116.html