Ajax简单解析

来源：互联网发布：做网站必备软件编辑：程序博客网时间：2024/04/25 07:44

1、什么是Ajax？

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

<script type="text/javascript">        var xmlHttp = null;        function showHint(str) {            if (str.length == 0) {               document.getElementById("txtHint").innerHTML = "";                return;            }            try {// Firefox, Opera 8.0+, Safari, IE7                xmlHttp = new XMLHttpRequest();            }            catch (e) {// Old IE                try {                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");                }                catch (e) {                    alert("Your browser does not support XMLHTTP!");                    return;                }            }            var url = "/ajax/processing?q=" + str;            url = url + "&sid=" + Math.random();//get方法添加一个随机数，防止获取到缓存数据            xmlHttp.onreadystatechange=function()            {                if (xmlHttp.readyState==4 && xmlHttp.status==200)                {                   document.getElementById("txtHint").innerHTML = xmlHttp.responseText;                }            }            xmlHttp.open("GET", url, true);            xmlHttp.send(null);        }    </script>

解释：由于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章节

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()使用起来更灵活。
实例：

    <script type="text/javascript">        function mAjax(str) {            $.ajax({                url: "/ajax/load",                data:{mString:str},                success:function(responseTxt,statusTxt,xhr){                    if(statusTxt=="success")                        alert("data: "+responseTxt+"\nnStatus:"+statusTxt);                }            });        }    </script>

其中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请求将不会被发送出去。
实例：

    <script type="text/javascript">        function mLoad(str) {            $("#loadz").load("/ajax/load",{mString:str},function(responseTxt,statusTxt,xhr){                if(statusTxt=="success")                    alert("data: "+responseTxt+"\nnStatus:"+statusTxt);                if(statusTxt=="error")                    alert("Error: "+xhr.status+": "+statusTxt);            });        }    </script>

在.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.});

实例：

    <script type="text/javascript">        function mGet(str){            $.get("/ajax/load?mString="+str , function (data,status){                alert("Data: " + data + "\nnStatus: " + status);            });        }    </script>

4.5、$.post方法

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

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

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

    <script type="text/javascript">        function mPost(str){            $.post("/ajax/load" ,{mString:str}, function (data,status){                alert("Data: " + data + "\nnStatus: " + status);            });        }    </script>

5、后记

图描述：

其实上面$.ajax、$.get、$.post、.load四个方法都是完成同样的功能，完全没问题，怎么运用就看业务的实际需要了。

阅读全文

0 0