Ajax异步操作集合啦（阿贾克斯）

/*
* Ajax的核心操作对象是xmlHttpRequest
* 　　简化操作步骤：实例化一个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封装了 "jquery.ajax()" "jquery.post()" "jquery.get() " "jquery(selector).load()" "jquery.getJson()" "jquery.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 json集合传入Controller后台
HTML代码 <html> <head> <meta http-equiv="Content-Type" content="text/htm ...
MVC之Ajax异步操作
在页面的局部通过Html.Action加载一块分布页,我们可以通过Ajax异步去更换或更新这块分布页通过一个下拉框值发生变化的时候,我们会去从后台重新访问这个action获取一个新的View,然后替 ...
for await of异步操作集合遍历
function Gen (time) { return new Promise((resolve,reject) => { setTimeout(function () { resolve(t ...
Ajax实现异步操作实例_针对JSON格式的请求数据
最近写了一篇ajax异步操作XML格式的,今天就写关于json格式的. 一.简单了解Json 1. JSON有两种表示结构,对象和数组. 1.1 对象: { key1:value1, key2:val ...
Ajax之json返回结果是集合的处理
Jquery实现ajax: $.ajax({ type //数据的提交方式:get和post url //数据的提交路径 async //是否支持 ...
JavaScript学习总结【12】、JS AJAX应用
1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技 ...
JQuery中Ajax的操作
JQuery Ajax异步操作的方式: $.ajax,$.post, $.get, $.getJSON. 一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异 ...
【Javascript】解决Ajax轮询造成的线程阻塞问题（过渡方案）
一.背景开发Web平台时,经常会需要定时向服务器轮询获取数据状态,并且通常不仅只开一个轮询,而是根据业务需要会产生数个轮询.这种情况下,性能低下的Ajax长轮询已经不能满足需求,频繁的访问还会造成线 ...
jquery中ajax的使用
Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进 ...

随机推荐

linxu php连接sqlserver
今天linux的yum也不能用,用的是第三方的yum源,yum安装好后更新header又花了很长时间. 记得安装指定安装目录要用 --with-php-config=PATH命令. CentOS 6安 ...
Xcode 6 模拟器路径
原文地址:http://leancodingnow.com/xcode-6-simulator-folder/ 本文主要介绍一下Xcode 6的iOS模拟器的应用目录的变化. Xcode 5的iOS模 ...
influxdb Measurements
第一次看influxdb的代码实例时不明白influxdb Measurements是什么意思.经过研究总结一下. 1)measurement,相当于关系数据库中的table,包含tag,field, ...
UTF-8 BOM(EF BB BF)
原标题:link标签和script标签跑到body下面,网页顶部有空白,出现“锘匡豢”乱码,UTF-8 BOM,EF BB BF 来自:http://tunps.com/link-and-script ...
TP复习5
## ThinkPHP 3.1.2 查询方式#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.普通查询方式 a.字符串 $arr=$m->wher ...
翻译学python---《Learn Python the hard Way》---第一章绪论
打算学习python,但是又不想单纯地看书或是写个小项目,干脆引入很流行的翻译学习法来学习吧- 在论坛上看到了国外的一本<Learn Python the hard Way> ...
Android 动画机制与使用技巧
动画效果一直是人机交互中非常重要的部分,与死板.突兀的显示效果不同,动画效果的加入,让交互变得更加友好,特别是在提示.引导类的场景中,合理地使用动画能让用户获得更加愉悦的使用体验一.Android ...
创建透明的UIToolbar
TranslucentToolbar.h文件 #import <UIKit/UIKit.h> @interface TranslucentToolbar : UIToolbar @end ...
JVM系列文章(四):类载入机制
作为一个程序猿,只知道怎么用是远远不够的. 起码,你须要知道为什么能够这么用.即我们所谓底层的东西. 那究竟什么是底层呢?我认为这不能一概而论.以我如今的知识水平而言:对于Web开发人员,TCP/IP ...
direction:rtl demo
<style> body {font:14px/18px Consolas;} div { width:100px;padding:10px; margin:10px 0px 30px 0 ...

Ajax异步操作集合啦（阿贾克斯）

Ajax异步操作集合啦（阿贾克斯）的更多相关文章

随机推荐

热门专题