A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

AJAX的概述


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

```markdown
什么是AJAX:
* AJAX:异步的 JavaScript And XML.
    * 使用的是老的技术,用的是新的思想.
了解同步和异步的区别:
    * 参考截图:
    * AJAX的功能:完成页面的局部刷新,不中断用户的体验.
* 早期的时候JS技术根本不受重视.后台开发人员经常将JS当成一种玩具式语言.JS中有一个对象XMLHttpRequest对象可以向服务器异步发送请求.传统的B/S结构的软件,所有实现功能都需要在服务器端编写代码(胖服务器).现在有了AJAX以后,可以将部分代码写到客户端浏览器(RIA:Rich Internet Application).FLEX:AS脚本编程.
* XML:使用XML做为数据传递的格式
* JSON:
```

## XMLHttpRequest

### 【属性】:

```markdown
属性:
* readyState            :XMLHttpRequest的状态
    0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
    1 (初始化) 对象已建立,尚未调用send方法
    2 (发送数据) send方法已调用,但是当前的状态及http头未知
    3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
    4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
* onreadystatechange    :当XMLHttpRequest状态改变的时候触发一个函数.
* status                :获得响应的状态码. 200 , 404 ...
* responseText            :获得响应的文本数据.
* responseXML            :获得响应的XML的数据.
```

### 【方法】:

```
方法:
* open(请求方式,请求路径,是否异步)        :异步去向服务器发送请求.
* send(请求参数)                        :发送请求.
* setRequestHeader(头信息,头的值)        :处理POST请求方式的中文问题.
```

### 【创建XMLHttpRequest对象】:

```java
* IE        :将XMLHttpRequest对象封装在一个ActiveXObject组件.
* Firefox    :直接就可以创建XMLHttpRequest对象.
function createXmlHttp(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
       try{// Internet Explorer
             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
        catch (e){
          try{
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch (e){}
          }
    }
    return xmlHttp;
}
```

### 【AJAX的入门】

```java
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框架实现异步请求

```java
JQuery的AJAX部分方法:
* Jq的对象.load(路径,参数,回调函数);//不重要
* $.get(路径,参数,回调函数,数据类型);
* $.post(路径,参数,回调函数,数据类型);
* $.ajax();//非常重要
    //注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置。
* serialize(); -- JQ的AJAX传递参数的时候需要使用的方法.
   
* 回调函数中的参数代表异步请求的响应
```



### 【数据的交互】!

```
数据在网络中传输是正负电压,也就是说在获得数据的时候只是符合JSON或XML格式的字符串
```

### 【AJAX的响应的数据】

```
文本,一段HTML的数据,XML,JSON
```

####XML

```
响应XML格式的数据:
【使用工具生成XML的文件】
通常使用xStream工具. 将集合,数组,对象转成XML.
```

#### JSON(轻量级)

##### JSON的数据格式的介绍:

```markdown

    {“id”:1,”name”:aaa}
    [{“id”:1,”name”:aaa},{“id”:2,”name”:bbb}]
    {
        “city”:{“cid”:1,”cname”:”xxx”}
    }
{} :代表对象
[] : 代表数组
```

##### JSON的生成工具

```markdown
JSONLIB 转换JSON数据:
* JSONArray     :将数组或List集合转成JSON.
* JSONObject    :将对象或Map集合转成JSON.
```



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马