AJAX核心介绍及原理和使用(XMLHttpRequest/window.ActiveXObject/XMLHttpRequest/XMLHttpRequest)

一、简介

1、ajax(asynchronouse javascript and xml)异步的javascript和xml；
2、是7种技术的综合，它包含了七个技术(javascript xml xstl xhtml dom xmlhttprequest css),ajax是一个粘合剂；
3、ajax是一个与服务器端语言无关的技术，即可以使用在（php/javaee.net网站/asp）；
4、ajax可以给客户端返回三种格式数据（文本格式，xml,json格式）；

二、核心对象

JavaScript对象XMLHttpRequest是整个Ajax技术核心，它提供了异步发送请求功能
获取方式：
1、IE：new ActionXObject("Microsoft.XMLHTTP");
2、火狐：new XMLHttprequest();
方法：
      open("提交方式"，url,true)设置发送请求的方式，请求的路径，是否采用异步机制。
      end();发送请求，当get方式时填null,post方式时填请求参数；
例如：send("参数名=值")
       setRequestHeader("Content-type","application/x-www-form-urlencoded");post提交时调用

事件：onreadystatechange当XMLHttpRequest的状态发生变化时触发
属性：
      readyState存有XMLHttpRequest的状态。从0到4发生变化，只需关注4：请求已完成，且响应已就绪即可
status响应状态，200表示响应ok
      responseText获得字符串形式响应数据
      Ajax的get方式中文乱码问题解决，使用js函数：encodeURI(value);

三、返回的数据格式

1.文本格式(html)
2.xml(可扩展标记语言):返回时存在核心对象的responseXML属性中
3.json格式
      JSON:JavaScript对象表示法(JavaScript Object Notation)是一个轻量级的数据交换格式.是基于文本的JavaScript语言的一个子集.完全独立于语言,支持不同的编程语言,易于读写.

四、语法格式

1.对象
      {"名称1":值1,"名称2":值2,......}
2.数组
     [值1,值2,值3.....]
     JSON只是一种文本字符串,它被存储在responseText属性中,为了读取存储在responseText属性中的JSON数据,需要使用JavaScript的eval函数将字符串转换为js对象.
     转换语法:
            var json=eval("("+核心对象.responseText+")");
             JSON的规则：对象是一个无序的“‘名称/值’对”集合。
             一个对象以“｛”（左括号）开始，“｝”（右括号）结束。
             每个“名称”后跟一个“：”（冒号）；“‘名称/值’对”之间使用“，”（逗号）分隔。
 规则如下：
     （1）映射用冒号（“：”）表示。名称：值
     （2）并列的数据之间用逗号（“，”）分隔。名称1：值1，名称2：值2
     （3）映射的集合（对象）用大括号（“｛｝”）表示。｛名称1：值1，名称2：值2｝
     （4）并列数据的集合（数组）用方括号（“[]”）表示。
              [
                     {名称1：值1，名称2：值2}，
                    {名称1：值1，名称2：值2}，
               ]
     （5）元素值可具有的类型;string,number,object,array,true,false,null

jquery和Ajax整合
1、load()方法是 jQuery中最为简单和常用 的Ajax方法
      语法:
              load(url[,data][,callback])

参数说明：
     url,string类型，表示请求的URL路径
     data（可选）object类型，发送的服务器的数据（key/value）,也就是json格式的数据
     callback(可选),请求完成时的回调函数

     注意：必须使用jquery对象调用，如果带参则post提交，否则采用get提交

      对于回调函数也有三个参数：代表请求返回 数据的data：代表请求状态的textStatus对象，值可以是succuss,error,notmodify,timeout;代表XMLHttpRequest对象

2、$.get()访求以get方式发送ajax请求的jquery方法
      语法;
            $.get(url,data,callback)
      参数说明：
           url:提交的路径
           data:表示发送的数据（key/value）,也就是json格式
           callback:表示回调函数

      回调函数有两个参数:第一个参数是返回的数据（文本、json、xml）;第二个参数是请求状态statusText,值可以是succuss,errror,notmodify,timeout。
      注意：$.get()方法本身返回一个xmlhttprequest对象

3.$.post()方法以post方式发送ajax请求的jqery方法
      使用方式同上

    a、生成的响应数据的类型
         <param name="contentType">text/html</param>

     b、为StreamResult的inputNmae属性注入值，值是Action中的二进制流属性的名称
         <param name="inputName">inputStream</param>

4、通过json插件来实现Ajax
      (1)、lib目录下需导入struts2-json-plugin.jar和json-lib-jdk15.jar包，sttuts2-json-plugin.jar提供了一个json-default的包，该包继承了struts-defaut，而且在该包中提供了一个json类型的result。

      (2)使用json插件后，配置action时需指定一个类型为json的result

五、什么是Ajax

完成发送请求
     javeScript------>XMLHttpRequest对象 ————---—》服务器《----------- 获取返回结果

导步：javaScript脚本发送请求后并不是一直等着服务器响应，而是发送请求后继续做其他的事，请求响应的事是异步完成的

          xml------->用于请求数据和响应数据的封装
         CSS—————》用于美化页面样式

六、Ajax关键元素

1、JacaScript语言：是Ajsx技术主要开发语言，其开发的代码可以嵌入到浏览器中，通过浏览器解释执行。
2、DOM文档语言：在Ajax技术 中，通过HTML、DOM获取某个元素，然而通过DOM的属性或方法修改局部元素，就可以实现局部刷新。
3、CSS样式：在Ajax中，用户界面的样式可以通过CSS定义或修改，大多数情况下，Ajax应用不仅要实现局部内容的改变，往往伴随着样式的改变，产生更加炫目的效果。
4、XMLHttpRequest对象：对象允许已异步的（Asynchronous）方式从服务器端获取数据以及向服务器端发送数据，异步的优点在于用户可以减少用户访问网页的时间，它基本不会中断用户的正常操作。
      XMLHttpRequest对象在大部份浏览器上已给实现而且拥有一个简单的接口允许数据从客户端传递到服务器端，传递的过程是异步过程，不全打断用户当前的操作，并且使用XMLHttpRequest传输的数据可以是任何形式
5、XMLHttpRequest对象的创建的统一语法：
     if(window.XMLHttpRequest){    //新版本IE浏览器（IE7及以上版本）或者其他浏览器
          xmlHttpRequest=new XMLHttpRequest();
     }else{    //版本的IE浏览器
         xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
     }

6、window.ActiveXObject返回值 是一个布尔类型，返回是true的时候 ，老版本的浏览器；
     window.XMLHttpRequest的返回值也是一个布尔类型变量，返回的是true的时候，是IE7以上或其他浏览器

7、XMLHttpRequest对象方法
      open(); xmlHttpRequest.open(strMethod,strURL,strAsync,strUser,strPassword);   说明：此方法用于创建一个新的http请求；并指定此请求的方法，URL以及验证信息，参数strMethod表示http请求方法，比如POST，GET和PUT等等：参数strUrl请求的URL地址，strAsync是可选参数，布尔型，表示请求是否为异步方式，默认为true,参数strUser和strPassword也是可选参数，如果服务器需要验证，这两个参数表示验证信息中的用户和密码；

       send(); xmlHttpRequest.send(varObject);  说明：此方法用于发送请求到服务器端并接受回应，此方式采用同步或异步取决于open方法的strAsync参数；

      abort();   xmlHttpRequest.abort();  说明：此方法的作用是取消当前的请求，XMLHttpRequest对象调用此方法后，当前请求返回UNNIITIALIZED状态；

       setRequestHeader();   xmlHttpRequest.setRequestHeader(strHeader.strValue);   说明：此方法的作用是单独指定请求的某个http头，这个方法包含两个参数，strHeader参数是字符串类型，表示头名称：strValue也是字符串类型，表示值，注意：如果已经存在此名称的http头则会覆盖，并且此方法必须在open方法后调用；

        getResponseHeader();   strValue=xmlHttpRequest.getResponseHeader();  说明：此方法用来从响应中获取指定的http头，注意：当send方法成功之后才能调用该方法；

        getgetResponseHeaders();   strValue=xmlHttpRequest.getAllResponseHeaders();  说明：此方法与getResponseHeader()方法类似，它是获取响应的所有http头，注意；当send方法成功之后才能调用该方法并且获取的每个Http头名称和值用冒号分割，并以n\结束；

8、XMLHttpRequest对象属性
      readyState=xmlHttpRequest.readyState;此属性返回当前请求的状态；
      status属性：语法：varStatus=xmlHttpRequest.status;返回当前请求的http状态码；200表示正确返回，404表示找不到资源；  
      responseText属性：将返回消息作为文本字符串
      responseXML属性：将返回消息视为XML文档，在服务器响应消息中含有XML数据时使用
      statusText属性：将返回当前请求的响应行状态；
      onreadystatechange属性：设置回调函数；
      发送请求：get和post请求    处理响应：处理文本响应和XML文本响应 
       <form action="<c:url value='queryAll'" οnsubmit="return validateCallback(this,navTabAjaxDone);" class="pageForm required-            validate" method="post">
       <form method="post" action="<c:url value='queryAll'/>" class="pageForm required-validate" οnsubmit="return validateCallback(this,navTabAjaxDone);">    、