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(" ("+$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的流程进行封装控制,使我们只需要进 ...
随机推荐
- Js制作点击输入框时默认文字消失的效果
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...
- 使用 Protocol Buffers 代替 JSON 的五个原因
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- Android实现静默安装与卸载
一般情况下,Android系统安装apk会出现一个安装界面,用户可以点击确定或者取消来进行apk的安装. 但在实际的项目需求中,有一种需求,就是希望apk在后台安装(不出现安装界面的提示),这种安装方 ...
- 【转】Android图片加载神器之Fresco-加载图片基础[详细图解Fresco的使用]
Fresco简单的使用—SimpleDraweeView 百学须先立志—学前须知: 在我们平时加载图片(不管是下载还是加载本地图片…..)的时候,我们经常会遇到这样一个需求,那就是当图片正在加载时应该 ...
- linux集群管理<转>
云在根本上是由硬件和软件组成的,这些组件需要经常细心地维护.出现故障的硬件需要修理或更换:软件需要应用补丁.更新和升级:必须根据需求和潜在的安全威胁提前配置系统.应用程序开发人员可能觉得计算云很方便. ...
- Apache、Tomcat、JBoss、Weblogic四个常用的JavaEE服务器
Apache全球应用最广泛的http服务器,免费,出自apache基金组织 Tomcat应用也算非常广泛的web 服务器,支持部分j2ee,免费,出自 apache基金组织 JBoss开源的应用服务器 ...
- YOUYOU深入学习Ganglia之三（gmetad的软件架构）
Ganglia这个东西,目前的情况是测试的多,真正在数据中心部署过的人少:使用的多,真正能了解其代码架构的人少.这里根据我的经验,分解一下ganglia的gmetad的软件架构,欢迎大家交流. 上面的 ...
- VS 统计代码行数
使用正则表达式 : ^:b*[^:b#/]+.*$ 简单说明如下: ^:行头 $:行尾 +:一个或多个 *:0个或多个 :b:表示空白,匹配空格或者制表符 # 表示后面是include,/表示注 ...
- Codeforces Round #180 (Div. 2) B. Sail 贪心
B. Sail 题目连接: http://www.codeforces.com/contest/298/problem/B Description The polar bears are going ...
- 关于SPA及RPA
SPA Request-------->Callback (page onload,execute <script>)-------->call func RPA URL re ...