网站首页 > 知识剖析正文

Ajax异步操作集合啦（ajax异步处理）

nixiaole 2024-11-15 23:03:34 知识剖析 24 ℃

* Ajax的核心操作对象是xmlHttpRequest

实例化对象

考虑到兼容问题,非IE5/IE6 使用 => new XMLHttpRequest;

IE5/IE6使用 => new ActiveXObject(Microsoft.XMLHTTP); ?神呐，请带走IE吧！

发送请求

使用 XMLHttpRequest 对象的 open('GET',url,async) 和 send 方法：

? open 有三个参数：

分别为http请求方式(get/post) ==》与 POST 相比，GET 更简单也更快，POST 没有数据量限制，不会缓存，相对安全

http请求地址 ==》url(统一资源定位符)文件所在服务器的地址

async：true（异步）或 false（同步）

?send(string) string：仅用于 POST 请求

接受响应，执行回调

当readyState的值发生改变时，触发readystatechange事件，事件中就可以为所欲为了

readyState==4 =>请求加载完成 / http的状态为200 =>响应成功

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>异步操作集合啦</title>
        <script type="text/javascript">
 /*
 * Ajax的核心操作对象是xmlHttpRequest
 *    简化操作步骤：实例化一个xmlHttpRequest对象  ==> 发送请求  ==> 接受响应 ==> 执行回调
 */
 var jsAjax = function {
 var xmlHttpR = null;
 if(window.ActiveXObject) {
 //IE5/IE6把xmlHttpRequest封装在window的子对象ActiveXObject中
 xmlHttpR = new ActiveXObject(Microsoft.XMLHTTP);
 } else if(window.XMLHttpRequest) {
 //非IE5、IE6
 xmlHttpR = new XMLHttpRequest;
 }

 if(xmlHttpR) {
 xmlHttpR.open("GET", "ajax.xml", true);
 xmlHttpR.onreadystatechange = function(e) {
 if(xmlHttpR.readyState == 4) {
 if(xmlHttpR.status == 200) {
 console.log(xmlHttpR.responseText);
 }
 }
 }
 xmlHttpR.send(null);
 }
 }
<script>
</head>
<body>
</body>
</html>

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
    <book category="COOKING">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>
    <book category="CHILDREN">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="WEB">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>

* js就是这么复杂，一套行云流水的操作下来，浏览器F5，哎，咋没效果，不行，修改代码，再刷，还有bug等着你！ (∪?∪)???zzz 敲两行jQuery放松一下！

* jQuery操作ajax用一个封装的函数 $.ajax 就可以搞定,操作步骤及其简化！！！

常用参数

type:"get", //http请求方式,值为 get/post 默认值为get

url:"", //统一资源定位符！！！重要参数

async:true, //值为 true/false 默认值为true,为异步,ajax发送请求后,在等待server端返回的这个过程中，会继续执行ajax块后面的脚本（异步思想）,直到server端返回正确的结果才会去执行success

dataType:"xml", //返回数据的类型 ,值为 xml/html/script/json/jsonp/text

data:obj, //传给sever的数据可以是字符串也可以是对象(比如登陆时传用户名密码)

cache:true, //默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息

complete:function{}, //请求完成后调用的回调函数（请求成功或失败时均调用）

success:function(res){}, //成功时调用回调函数！！！重要回调

error: function (err) {} //发生错误时调用回调函数

jquery封装了 $.ajax $.post $.get $(selector).load $.getJson $.getScript

其实弄懂$.ajax就好了，别的都是它延伸出来，具有某种特异功能，$.ajax是大一统，霸天下，废话不多说，直接上实例，看注释

 $(".loadDom").load("ajax.html", function(responseText, textStatus, xmlHttpRequest) {
 /*
 * 常用与把某段文本(如 :html文档) 嵌入当前文档中，更逆天的是可以把某文档的某片段加载进来 如$(".loadDom").load("load.htm  div.test").
 * load 有四个参数:
 * ① url:可以加入querystring ==》'login.php?uname="wbx_2018@qq.com"&pwd="jiubugaosuni"',很明显这已然是get请求
 * ② data:附带参数就会转换为post请求，基本会省略
 * ③ function：回调函数        ↙?下左继续分析
 *
 * 回调函数也可以携带三个参数：
 *     ① responseText 服务端返回的文本
 *     ② textStatus   值为success或error
 *     ③ xmlHttpRequest  这对象就不多说了，原生的
 */
 console.log(responseText);
 })


 $.get("ajax.json", {
 para1: "val1",
 para2: "val2"
 }, function(data, textStatus) {
 console.log(data);
 }, "json")


 //$.post("ajax.php",{
 //        para1: "val1",
 //        para2: "val2"
 //}, function(data, textStatus) {
 //        console.log(data);
 //},"json")


 $.getScript('ajax.js', function(data) {
 console.log(data);
 });


 $.getJSON('ajax.json', function(data) {
 console.log(data);
 });

 $.ajax({
 type: "get",
 async: true,
 url: "ajax.xml",
 dataType: "xml",
 complete: function(data) {
 console.log(data);
 },
 success: function(res) {
 //遍历xml文档 dom操作
 var books=$(res).find("bookstore book"),
 $this,
 $htm=;
 $.each(books, function(index) {
 $this=$(this);
 $htm.push("第"+(index+1)+"本书： 《"+$this.find("title").text+"》 --- ");
 $htm.push($this.find("author").text);
 $htm.push("&nbsp;("+$this.find("year").text+")<br>");
 });
 $("#test").append($htm.join(""));
 }
 });

注:在进行ajax访问时也许会遇到页面无效果或是报错---XMLHttpRequest cannot load，出现这种情况一般是浏览器禁止ajax本地访问（chrome）。把文件部署到服务器不会出现该问题。解决方法：

1.可在 Chrome 快捷方式中添加启动参数： --allow-file-access-from-files（前面加空格）

2.用HBuilder这类具有内置服务器的编辑器，直接运行即可

当然我们可以用浏览器提供的调试工具，搞清楚阿贾克斯的一举一动，还是

上一篇：前端面试题《AJAX》（ajax面试题2020）
下一篇：全新web前端开发教程之Jquery Ajax

网站首页 > 知识剖析 正文

Ajax异步操作集合啦（ajax异步处理）

猜你喜欢

网站首页 > 知识剖析正文