WEB-AJAX和JQuery篇

【AJAX的概述】：

Ø  什么是AJAX:

* AJAX:异步的 JavaScript And XML.

    * 使用的是老的技术,用的是新的思想.

Ø  了解同步和异步的区别:

AJAX的功能:完成页面的局部刷新,不中断用户的体验.

* 早期的时候JS技术根本不受重视.后台开发人员经常将JS当成一种玩具式语言.JS中有一个对象XMLHttpRequest对象可以向服务器异步发送请求.传统的B/S结构的软件,所有实现功能都需要在服务器端编写代码(胖服务器).现在有了AJAX以后,可以将部分代码写到客户端浏览器(RIA:Rich InternetApplication).FLEX:AS脚本编程.

* XML:使用XML做为数据传递的格式: JSON:

【XMLHttpRequest】：

Ø  属性:

* readyState            :XMLHttpRequest的状态

   

* onreadystatechange    :当XMLHttpRequest状态改变的时候触发一个函数.

* status                :获得响应的状态码. 200 , 404 ...

* responseText          :获得响应的文本数据.

* responseXML           :获得响应的XML的数据.

Ø  方法:

* open(请求方式,请求路径,是否异步)     :异步去向服务器发送请求.

* send(请求参数)                     :发送请求.

* setRequestHeader(头信息,头的值)     :处理POST请求方式的中文问题.

Ø  创建XMLHttpRequest对象:

* IE        :将XMLHttpRequest对象封装在一个ActiveXObject组件.

* Firefox   :直接就可以创建XMLHttpRequest对象.

function createXmlHttp(){

   varxmlHttp;

   try{ //Firefox, Opera 8.0+, Safari

       xmlHttp=new XMLHttpRequest();

    }

    catch(e){

       try{// Internet Explorer

             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

          }

        catch (e){

          try{

             xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

          }

          catch (e){}

          }

    }

 

    returnxmlHttp;

 }

【AJAX的入门】

Ø  AJAX的编写的步骤:

* 第一步：创建一个异步对象.

* 第二步：设置对象状态改变触发一个函数.

* 第三步：设置向后台提交的路径

* 第四步：发送请求.

Ø  GET方式提交请求:

function ajax_get() {

    // 1.创建异步对象

    var xhr =createXMLHttp();

    // 2.设置状态改变的监听 回调函数.

    xhr.onreadystatechange= function(){

        if(xhr.readyState == 4){ // 请求发送成功

            if(xhr.status== 200){ // 响应也成功

                // 获得响应的数据:

                var data = xhr.responseText;

                // 将数据写入到DIV中:

                document.getElementById("d1").innerHTML= data;

            }

        }

    }

    // 3.设置请求路径

    xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);

    // 4.发送请求

    xhr.send(null);

}

Ø  POST方式提交请求:

function ajax_post(){

    // 创建异步对象:

    var xhr =createXMLHttp();

    // 设置监听:

    xhr.onreadystatechange= function(){

        if(xhr.readyState == 4){

            if(xhr.status== 200){

                document.getElementById("d1").innerHTML= xhr.responseText;

            }

        }

    }

   

    // 打开路径:

    xhr.open("POST","/day15/ServletDemo1",true);

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

    // 发送请求:

    xhr.send("name=张三&pass=123");

}

【JQuery的AJAX】

JQuery的AJAX部分方法:

* Jq的对象.load(路径,参数,回调函数);

* $.get(路径,参数,回调函数,数据类型);

* $.post(路径,参数,回调函数,数据类型);

* $.ajax();

* serialize(); -- JQ的AJAX传递参数的时候需要使用的方法.

【JSON的概述】

Ø  JSON的概念:

Ø  JSON的数据格式的介绍:

{“id”:1,”name”:aaa}

[{“id”:1,”name”:aaa},{“id”:2,”name”:bbb}]

{

    “city”:{“cid”:1,”cname”:”xxx”}

}

【JSON的生成工具】

Ø  JSONLIB 转换JSON数据:

* JSONArray     :将数组或List集合转成JSON.

* JSONObject    :将对象或Map集合转成JSON.