Ajax简单解析

旧城等待， 2022-06-10 10:29 189阅读 0赞

## **1、什么是Ajax？** ##

*  AJAX = 异步 JavaScript 和 XML。
 *  AJAX 是一种用于创建快速动态网页的技术。
 *  通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
 *  传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
 *  有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。  
    引用自：[AJAX 简介][AJAX]

## **2、准备一下资源** ##

网页代码如下：

<html>
    
    <head>
        <script src="js/jquery-3.2.0.min.js"></script>
    
        <script type="text/javascript">...</script>
        .
        .
        .
        <script type="text/javascript">...</script>
    
    </head>
    <body>
    <h2>Hello World!</h2>
    <form>
        First Name:
        <input type="text" id="txt1" onkeyup="showHint(this.value)" onclick="mXXXX(this.value)" >
    </form>
    <p>Suggestions: <span id="txtHint"></span></p>
    <p>Suggestions: <span id="loadz"></span></p>
    </body>
    </html>

mXXXX(this.value)这个js方法替换为后面的事例即可。  
jquery的话自己准备，去官网下载就好了。  
后台代码如下(代码基于Spring MVC)：

package space.xxhui.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    @Controller
    @RequestMapping("ajax")
    public class Ajax {
    
        @RequestMapping("processing")
        @ResponseBody
        public String processing(@RequestParam("q")String param){
            System.out.println(param+"-");
            return param+"-";
        }
    
        @RequestMapping("load")
        @ResponseBody
        public String load(String mString){
            System.out.println(mString);
            return mString+"down";
        }
    
    }

## **3、使用最原始的JS代码生成XMLHttpRequest** ##

解释：由于IE5 和 IE6 使用 ActiveXObject，所以考虑兼容性，如果浏览器不能实例化XMLHttpRequest，就实例化ActiveXObject，两者都不行则返回，Ajax使用异步才能体现其价值所在，所以这里不示范同步的方法。  
在同步和异步中，公用的方法有:  
open(method,url,async) : 规定请求的类型、URL 以及是否异步处理请求。

*  method：请求的类型；GET 或 POST
 *  url：文件在服务器上的位置
 *  async：true（异步）或 false（同步）

send(string) : 将请求发送到服务器。

*  string：仅用于 POST 请求

**open方法实际上是往对象中放参数，真正跟服务器沟通的步骤应该是open方法执行的时候。**  
而当async为true时，那么这时，使用的异步方法，此时要操作数据只能依靠一个回调function：onreadystatechange

onreadystatechange : 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

XMLHttpRequest属性：  
readyState : 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。  
0: 请求未初始化  
1: 服务器连接已建立  
2: 请求已接收  
3: 请求处理中  
4: 请求已完成，且响应已就绪

status :  
200: “OK”  
404: 未找到页面

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

**总结过程是如下：**  
**1、生成XMLHttpRequest**  
**2、设置onreadystatechange方法**  
**3、open设置参数**  
**4、send正式连接**

参考：[AJAX XHRx章节][AJAX XHRx]

## **4、$.ajax、$.get、$.post、.load的区别和用法** ##

### 4.1、区别 ###

1、jquery对Ajax进行了封装，其中$.ajax方法是**最基本**的方法其中也拥有众多的属性可以设置，灵活度最高，但也是原始的，$.get、$.post、.load三个方法比$.ajax更高一级，你可以这想成**上下级关系**。

2、$.get、$.post、.load三个方法中，我们也可以分一分，根据**操作的对象**是否是**选择器**，.load方法是需要一个选择器元素的，否则不能执行.load方法，$.get、$.post则是直接$美元符号执行方法。

3、$.get、$.post再次细分，就是http中的get方法和post方法的区别了，get方法数据放在url中，有长度限制，并且允许缓存，而post方法数据放在请求体中，没有长度限制，没有缓存机制。

所以思路是这样子，接下来看看代码吧，说得再多，不如体验一把。

### 4.2、$.ajax方法 ###

**jQuery 发送的所有 Ajax 请求，内部都会通过调用 $.ajax() 函数来实现。通常没有必要直接调用这个函数**，可以使用几个已经封装的简便方法，如$.get()和.load()。如果你需要用到那些不常见的选项，那么，$.ajax()使用起来更灵活。  
实例：

其中success属性的是一个function，原型是：

Function( Anything data, String textStatus, jqXHR jqXHR )

这个方法也是**成功时的回调**，逻辑在这个function中执行，第一个形参数是返回的数据，第二个是状态，这里是success，第三个是XMLHttpRequest对象(不同版本jquery会有不同的类名，所以你知道是XMLHttpRequest对象就行了)

### 4.3、.load方法 ###

描述：从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中。  
方法原型：

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

*  url是请求的地址(可以值一个html页面
 *  data可选项，向服务器发送一些数据
 *  complete类型方法，跟上面的回调参数一样不做解释，这个回调方法是在load方法执行完，并且html完全加载完后执行该方法。

这个方法是从服务器获取数据最简单的方法。除了不是全局函数，这个方法和$.get(url, data, success) 基本相同，它有一个隐含的回调函数。 当他检查到一个成功的请求(i.e. 当 textStatus是 “success” 或者 “notmodified”)时，.load() 方法将返回的HTML 内容数据设置到相匹配的节点中。  
  如果选择器没有匹配的元素——在这种情况下，如果document不包含id = “result” 的元素- 这个Ajax请求将不会被发送出去。  
实例：

在.load方法中，可以加载一个html，如果没有添加了选择器表达式，html中含有js脚本会被加载运行，添加了选择器表达式，会只加载那个选择器的内容。

### 4.4、$.get方法 ###

描述：使用一个HTTP GET请求从服务器加载数据。  
方法原型：

jQuery.get( url [, data ] [, success ] [, dataType ] )

*  url是请求的地址(可以值一个html页面
 *  data可选项，向服务器发送一些数据
 *  success属性是一个可选项方法，跟上面的回调参数一样不做解释，这个回调方法是在成功返回数据的时候调用。
 *  dataType可选项，从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, text，html）。**注意：有dataType必须要有success回调方法**

$.get方法，等价于：

$.ajax({
    2.  url: url,
    3.  data: data,
    4.  success: success,
    5.  dataType:data类型
    6.});

实例：

### 4.5、$.post方法 ###

描述：使用一个HTTP POST 请求从服务器加载数据。  
方法原型：

jQuery.post( url [, data ] [, success ] [, dataType ] )

方法参数与get相同不做解释。  
**注意：用 POST 获取的页面是从来不会被缓存, 所以这些请求中的 cache 和 ifModified 选项在 jQuery.ajaxSetup() 是无效的。**  
实例：

## **5、后记** ##

图描述：

![这里写图片描述][SouthEast]  
  
其实上面 $.ajax、 $.get、 $.post、.load四个方法都是完成同样的功能，完全没问题，怎么运用就看业务的实际需要了。

[AJAX]: http://www.w3school.com.cn/ajax/ajax_intro.asp
[AJAX XHRx]: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
[SouthEast]: /images/20220610/c6df00f68a8c4dd9a3fcecf7bfb48667.png