Ajax 简介

1.Ajax概述

   ①Asynchronous JavaScript And XML(异步的JavaScript和XML)是几种技术的强强联合，Ajax实际上就是一种使用JavaScript控制前台所有操作，同时在后台把得到的数据用XML 代码来传递给前台的一种Web程序开发模式。

   ②好处：(1)请求响应能够通过其他JavaScript动作来实现

           (2)可以不用刷新整个页面，只刷新需要改变数据的一部分

           (3)能够开发出更具有吸引力的页面效果

   ③一段XML代码

   public String getXML(Student stu){

        StringBuffer sb = new StringBuffer();

        sb.append("<xml version=1.0 >");

        sb.append("<student>");

        sb.append("<name>"+stu.getName()+"</name>");

        sb.append("<age>"+stu.getAge()+"</age>");

        sb.append("</student>");

        return sb.toString();

   }

2.使用Ajax进行请求和普通form提交请求的区别

①form提交

对象是HttpServletRequest，请求和响应的过程是同步的

    <form action="sssServlet" method="post"> </form>

    <a href="xxServlet?name=value" >链接</a>

②Ajax请求

对象是XMLHttpRequest，请求和响应的过程是异步的

    <!-- JS  代码 -->

    xmlreq.open("method","url",true);

    xmlreq.send("name=value");

③同步和异步通讯

⑴同步：指两个或两个以上随时间变化的量在变化过程中保持一定的相对关系。

如下图所示：

----     -----     -----     -----         A

       -----     -----     -----     -----    B   

   ---------------------------------------    总时间

⑵异步：在发送字符时,所发送的字符之间的时间间隔可以是任意的。当然,接收端必须时刻做好接收的准备，在时间上错开，两边都可以工作，关键是不用刻意刷新页面，等待响应。

  如下图所示：

  -----  ------    ------------   ----------      A(浏览器)

    -------  --------      -----------     -----  B(服务器)

 3.Ajax核心处理对象

    ①核心处理对象是一个浏览器内置的组件，在js中可以用对象名为XMLHttpRequest 来表示。最早出现在IE4里面，后来其他浏览器中也都内置了该对象。不同浏览器创建该对象的方法不一样。

    ②IE浏览器中所有组件都叫做ActiveXObject,不同控件创建方式不一样

IE5之前 var xmlreq = ActionXObject("Microsoft.XMLHTTP");

    IE5之后 var xmlreq = ActionXObject("Msxml2.XMLHTTP");

非IE浏览器 var xmlreq = new XMLHttpRequest();

③常用方法：

   (1) xmlreq.abort()：取消当前的HTTP请求

   (2) xmlreq.open("method","url",true)：初始化一个HTTP请求，指定请求方法(Get/Post)、URL、身份验证信息等

   (3) xmlreq.setRequestHeader()：设置HTTP请求的头信息

   (4) xmlreq.getResponseHeader()：获得响应内容的HTTP头信息

   (5) xmlreq.send(date)：发送一个HTTP请求到服务器

④常用属性：

   (1)xmlreq.onreadystatechange;指定当发生就绪状态变更事件时的处理者，通常是JavaScript函数

    xmlreq.onreadystatechange=function ××(){//回调函数}

   (2)xmlreq.readyState       XMLHttpRequest对象专有的异步响应的状态

0 表示未初始化，即XMLHttpRequest 对象未创建open()方法未调用

1 表示XMLHttpRequest对象被创建，但请求未发出send()未调用

2 表示HTTP请求已经发出正在处理中，这时可以取得HTTP头信息，但是HTTP响应内容不可用

3 表示HTTP响应内容部分数据可用，但响应还没有完成

4 表示服务器响应完成，可以从属性responseBody、responseText、responseXML中获得完整响应内容

   (3)xmlreq.status           200(按照 HTTP 协议规定的状态值)

   xmlreq.readyState=4 与 xmlreq.status=200的区别：

   例如：从服务器A发送一仓库瓷器，到浏览器B，中间可能会有很多车来进行运输，而且各个车走的路线也不同。如何保证收到的货数量正确而且没有货物破损？

   xmlreq.readyState=4  验证返回数据的数量是否OK

   xmlreq.status=200    验证返回数据完整性是否OK

(4)响应主体 responseBody：以无符号字节数组描述响应内容正文

(5)响应流 responseStream：以 IStream(二进制数据流) 形式描述响应内容正文

(6)响应文本 responseText：响应内容正文的纯文本形式

(7)响应 XML responseXML：以XML Dom 描述响应内容正文，（常用）

 4.Ajax开发的步骤

   ①创建XMLHttpRequest对象

   ②使用xmlreq.open()方法指定要连接的服务器代码和请求提交方法

   ③指定服务器响应完成后，如何处理服务器响应内容--回调函数

   ④使用xmlreq.send()提交请求

   补充：服务器端操作

   ①得到页面请求参数

   ②判断或数据库查询

   ③通过response对象返回响应结果(与之前有区别)

5.(补充)jQuery基本语法

   ①使用jQuery

⑴如何引入jQuery <script type="text/javascript" src="jquery.js"></script>

⑵如何调用jQuery要想安全、无错的调用jQuery代码，必须把它们放在一个函数中

<script language=JavaScript>                  

    $(document).ready(function(){

            //在这里写 jQuery 代码能够被正常调用

           $("div").addClass("a");

    });

</script>

-------------------------------------------------------------------------------

document:DOM文档对象,只能调用DOM API中的方法

$(document):jQuery对象,能调用jQuery API中的方法，简单很多

.ready():html文档加载完毕，触发的事件，开始干活

function(){}:html加载完毕后，如何处理

$("div"):jQuery选择器，转化<div>标签为jQuery对象

.addClass("a"):给该标签添加一个class属性,<div class="a">

   ②核心能力----选择器

     jQuery的根本在于它在页面上选择和操作某些元素的能力。

jQuery创建了自己的选择语法，非常简单。它通过HTML元素名、ID、Class查找对象，返回的对象都是jQuery对象

jQuery对象不能直接调用DOM定义的方法，只能使用jQuery API中指定的方法

举例：

$(“div”).show();     //按照html选择

$("p").css("background", "#ff0000");  //

$("#sampleText").html("Hi");   //按照ID选择

$(“.redBack”).css(“background”, “#ff0000”);  //按照CSS选择

jQuery可以合并搜索结果，可以在一个搜索中，将多个搜索条件合并起来。通过使用 “,”分隔每个搜索条件，搜索将返回与搜索词匹配的一组结果

$(“p, span, div”).hide();      //按照合并条件选择

   ③遍历

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

</ul>

 

var aa = $("li");  //得到数组

//需要对其中某些元素进行单独的设置，需要循环该数组---循环就是遍历

$("li").each(function(i){

    //该每次循环取出的标签添加文字

    $(this).html("列表"+i);

});

each() 函数，和“for loop”的功能一样，遍历每个函数并通过迭代递增元素，循环中每个元素的引用都可以通过“this”或$(this)来实现：

实现表格隔行换色效果

 $("tr").each(function(i){

        $(this).css({background: ["#ccc","#fff"][i%2]});

   });

其他函数：

slice(start,end)   //按照指定的开始结束索引截取

next()             //查找后面他紧邻的同辈元素

filter(expr)       //根据条件过滤

  ④赋值、取值

   ⑴jQuery可以使用同一个函数实现给页面中某个元素赋值和取值；带参数就是赋值方法；不带参数就是取值方法。

代码如下：

$(“#msg”).html();    //返回id=msg的元素节点的html内容

$(“#msg”).html(“<b>new Content</b>”); //将新内容写入id=msg的元素中

$(“#msg”).text(); //返回id=msg的元素节点的文本内容

$(“#msg”).text(“new Content”); //将文本写入id=msg的元素节点中

$(“#msg”).height();   //返回 id=msg 的元素的高度

$(“#msg”).height(“300”); //将 id=msg 的元素高度设为 300

$(“input”).val();  //返回表单的 value 值

$(“input”).val(“test”);  //将表单的 value 值设置为 test

$(“#msg”).click() ;  //触发 id=msg 的元素的单击事件

$(“#msg”).click([fn]) ;  //为id=msg 的元素的单击事件添加函数

jQuery方法的返回值全部是jQuery对象，所以可以支持方法的连写，简化代码。

⑵jQuery函数可以方便的得到或者修改任意元素的样式，从而改变页面效果

主要包括以下样式：

$("#msg").css("background"); //返回元素的背景颜色

$("#msg").css("background","#ccc") //设定元素背景为灰色

$("#msg").height(300); $("#msg").width("200"); //设定宽高

$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式

$("#msg").addClass("select"); //为元素增加名称为select的class

$("#msg").removeClass("select"); //删除元素名称为select的class

$("#msg").toggleClass("select"); //如果存在(不存在）就删除(添加)名称为select的class

⑶jQuery 还提供了几个实用的方法，实现状态切换功能。如：

toggle()方法包括了hide()和show()方法

slideToggle()方法包括了slideDown()和slideUp方法

⑷jQuery 已经把所有的DOM事件处理都进行了封装，我们可以直接通过jQuery对象获得对象并添加事件处理。

代码如下：

$("#msg").click(function(){alert("good")})//为元素添加了单击事件

$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})

//为三个不同的p元素单击事件分别设定不同的处理

  ⑤jQuery进行Ajax处理的方法

  Ajax 如果使用 JavaScript  完成必须要

    (1)进行浏览器判断

    (2)创建 XMLHttpRequest 对象

    (3)打开与服务器的连接

    (4)设置回调函数

    (5)发送请求

    在jQuery中，把上述5个步骤，合为一体。

    $.ajax({

       type: "POST",

       url: "some.do",

       data: "name=John&location=Boston",

       success: function(msg){

          //回调函数,msg 服务器返回的数据

         alert( "Data Saved: " + msg );

       }

    });

6.(补充)JSON

  ①在Web程序中，需要从服务器返回数据，要求返回的不只有字符串、还可以返回XML等。

返回的不同格式中包含的数据量不同：

    Content-Type="text/html"  "text/xml"

    (1)String str = "标题|正文|作者";

       解析字符串，适合在传递少量数据时使用

       String[] sarr = str.split("|");

       String title = sarr[0];

       String count = sarr[1];

       String author = sarr[2];

    (2)服务器返回的数据

    "<xml version="1.0" >

       <car total="$50.">

          <item name="">

            <amount></amount>

          </itme>  

          <item name="">

            <amount></amount>

          </itme>

          <item name="">

            <amount></amount>

          </itme>

      </car>"

      在浏览器中取出数据

      DOM   document.getElementByTagName("car");

      jQuery   $("items").each(function(i){

                    $(this name).val();

               });

优缺点对比：

(1)服务器返回String字符串，在浏览器中解析简单，但是数据量比较小。

(2)服务器返回xml字符串，能够包含大量数据，但是服务器端的转化代码不能通用，前台解析有固定的方法，比字符串解析要更可靠。

②程序开发中还可以选择另外一种通用数据格式： JSON

(1)既有字符串的简易性

(2)又有XML的格式化

以下即是JSON的两种结构：

[{"id":"260","name":"长沙"},{"id":"261","name":"张家界"},

{"id":"262","name":"株洲"},{"id":"263","name":"韶山"},

{"id":"264","name":"衡阳"},{"id":"265","name":"郴州"},

{"id":"267","name":"娄底"},{"id":"268","name":"耒阳"},

{"id":"269","name":"永州"},{"id":"270","name":"湘乡"},

{"id":"271","name":"湘潭"},{"id":"272","name":"常德"},

{"id":"273","name":"益阳"},{"id":"274","name":"怀化"},

{"id":"275","name":"邵阳"},{"id":"276","name":"岳阳"},

{"id":"277","name":"吉首"},{"id":"278","name":"大庸"},

{"id":"279","name":"韶山"}]    

[{"id":"1","name":"中国"}] 

(1)用 []  表示其中包含多个数据，是一个数组

(2)用 {}  表示其中的某一条数据

(3)用  ,  表示数据与数据之间的分割

(4)用  :  表示某一条数据，名称和值的关系