目录
Ajax的简介
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
ajax的Asynchronous Javascript And XML
好处:异步访问(加快响应速度,不必等待)
局部刷新(不必刷新整个网页,只是局部刷新)
通俗理解Ajax
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
总结: 局部刷新,异步访问
同步请求
知识铺垫: 同步问题
角色: 1.用户 2.服务提供者
同步请求缺点: 当后端服务器不能及时处理请求时,用户处于等待的状态,而页面处于刷新状态.
用户体验差.
异步请求
同步: 用户直接访问服务器.
异步: 用户间接访问服务器 用户在等待数据的过程中,还可以执行其他的业务操作.
请求过程:
1.用户将请求交给Ajax引擎处理. (请求)
2.Ajax引擎接收到用户请求之后,自己发起新的URL请求,向服务器获取数据.
3.服务器接收到请求之后,根据自身进行业务处理,最终将结果返回 返回给引擎.
4.Ajax引擎通过事先规定好的 回调函数实现返回值的传递. 当用户获取返回值之后,则开始调用函数中的内容.进行局部刷新。
Ajax的语法
1.传统Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试ajax</title>
<script src="./js/jquery-1.8.3.min.js"></script>
<!-- ajax的好处：异步访问（加快响应速度），局部刷新（不必刷新整个网页,只是局部刷新）
使用jQuery提供的Ajax技术，需要指定一些参数
访问数据：https://p.3.cn/prices/mgets?skuIds=J_100003717483
返回数据：
-->
<script>
$(function() { //文档就绪事件
// 使用jQuery提供的Ajax技术，需要指定一些参数
$.ajax({ //发起Ajax请求
// 准备参数
type: "POST", //请求方式
url: "https://p.3.cn/prices/mgets", //请求地址
contentType: "application/json;charset=utf-8", //请求数据的类型
data: //请求时带的参数
{
"skuIds": "J_100003717483"
},
dataType: "jsonp", //期望服务器返回来的数据类型
success: function(data) { //请求成功会返回数据
// console.log(data);// {p: "-1.00", op: "2499.00", cbf: "0", id: "J_100003717483", m: "10000.00"}
// document.getElementById("d1").innerHTML=data[0].id;
$("#d1").text(data[0].id);
$("#d2").text(data[0].op);
$("#d3").text(data[0].p);
},
error: function(data) { //请求失败会给失败提示
alert("请求错误！");
}
})
})
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<img src="./img/1.jpg">
<img src="./img/1.jpg">
</body>
</html>
2.简化Ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.导入JS函数类库 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 让页面加载完成后再次执行 -->
<script>
//循环写法
/**
* //js 实现for循环
for(var i=0;i<data.length;i++){
var user = data[i]
console.log(user)
}
in关键字 index代表下标
for(var index in data){
console.log(data[index])
}
//增强for写法 of 表示直接获取遍历内容
for(var user of data){
console.log(user)
}
*/
$(function() {
/** // alert("页面加载完成，jQuery调用成功")
// 利用Ajax的get请求方式
// http://localhost:8090/getUser 全部数据
// 将数据以表格的形式展现
//种类: 1.$.get() 2.$.post() 3.$.getJSON() 4.$.ajax()
//js中可以根据返回值的数据动态匹配类型
//$.get("url地址","参数",function(data){},"返回值类型")
var url = "http://localhost:8090/getUser";
*/
var name = "张三"
var age = 18
// js传参方式（2）
//参数写法1: key=value&key2=value2
var args1 = "name=" + name + "&age=" + age
//参数写法: {key:value,key2:value2}
var args2 = {
name: name,
age: age
}
//如果有参数,则直接添加,如果没有参数,则直接省略
var url = "http://localhost:8090/getUser";
$.get(url, function(data) {
//增强for写法 of 表示直接获取遍历内容
for (var user of data) {
var id = user.id
var name = user.name
var age = user.age
var sex = user.sex
var tr = "<tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + age +
"</td><td>" + sex + "</td></tr>"
//利用ID选择器定位table标签
//append 向每个匹配的元素内部追加内容。
$("#tab1").append(tr) //对应var tr添加到tab1中
}
})
/**
* /*
* $.ajax相关说明
* 1.{key:value}
* 2.type: ajax请求的方式 get/post/put/delete
* 3.简化$.get(..) $.post(...) $.getJSON(...)
* 4.url: 远程服务器地址
* JSONP: JS端解决跨域问题的一种机制. 现在几乎淘汰了
* cache: true 默认值为true
* async: true 默认异步!!!!
*
$.ajax({
type: "get",
url: "http://localhost:8090/getUser",
//data: {key:value,key2:value2}
dataType: "json",
async: false, //异步改为同步
cache: false,
success: function(result){ //200
console.log(result)
},
error : function(){
alert("服务器正忙,请稍后!")
}
})
*/
})
</script>
</head>
<body>
<table id="tab1" border="1px" width="700px" align="center">
<tr>
<td colspan="4" align="center">
<h1>表格数据</h1>
</td>
</tr>
</table>
</body>
</html>
回调地狱
解释: 由于ajax多层级嵌套,导致返回值的回调函数解析困难.把这种调用称之为回调地狱问题.
解决方案:
1.闭包解决 闭包非闭
2. 通过promise对象进行封装 vue对象中解释的.
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
