首页 > temp > JavaScript教程 >
-
6-ajax
- ajax简述
Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。
尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息
异步请求，局部刷新
1.1 ajax原理
2. ajax语法
onreadystatechange事件
-
当请求被发送到服务器时，我们需要执行一些基于响应的任务。。
-
每当 readyState 改变时，就会触发 onreadystatechange 事件。
-
readyState 属性存有 XMLHttpRequest 的状态信息。
2.1 ajax状态码
2.2 http状态码
2.3 实例
以下通过实例的方式来演示ajax原生使用
- get请求
<body>
<div id='myDiv'></div>
</body>
<script>
// 兼容性处理
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+,和其他浏览器
xmlhttp = new XMLHttpRequest();
} else {
// IE5,IE6
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//ajax打开链接
xmlhttp.open(
"GET",
"http://wkt.myhope365.com/weChat/applet/course/banner/list?number=3",
true
);
//ajax发送请求
xmlhttp.send();
//检测请求状态
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
let imgList = JSON.parse(xmlhttp.responseText).data;
console.log(imgList);
imgList.forEach((value) => {
$('#myDiv')[0].innerHTML += `<img src=${value.imgUrl}>`;
});
}
}
</script>
- post请求
<body>
<div id='myDiv'></div>
</body>
<script>
// 兼容性处理
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+,和其他浏览器
xmlhttp = new XMLHttpRequest();
} else {
// IE5,IE6
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//ajax打开链接
xmlhttp.open(
"POST",
"http://wkt.myhope365.com//weChat/applet/course/list/type",
true
);
// ajax设置请求头
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//ajax发送请求
xmlhttp.send("type=free&pageNum=1&pageSize=5");
//检测请求状态
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(JSON.parse(xmlhttp.responseText).rows);
JSON.parse(xmlhttp.responseText).rows.forEach(item => {
$('#myDiv')[0].innerHTML += `<dl class="course"><dt><img src="${item.coverFileUrl}"alt="" /></dt><dt>${item.courseTitle}</dt><dt>共${item.learningNum}节课|${item.participationsCount}人报名</dt><dt>免费</dt></dl>`
});
}
}
</script>
3. 引入jQuery的ajax实例
3.1 jquery-get
<body>
<div id='box'></div>
</body>
<script>
$.get(
'http://wkt.myhope365.com/weChat/applet/course/banner/list?number=5',
function (data, status) {
if (status == 'success') {
data.data.forEach(item => {
$('#box').append(`<img src="${item.imgUrlPc}" alt="">`)
});
}
}
)
</script>
3.2 jquery-post
<body>
<div id='box'></div>
</body>
<script>
// $.post()请求不能设置JOSN格式的请求头，所以请求头类型是JSON格式的话需要用$.ajax()
$.post(
"http://wkt.myhope365.com/weChat/applet/course/list/type", "type=free&pageNum=1&pageSize=10",
function (data, status) {
if (status == "success") {
data.rows.forEach((item) => {
console.log(item.courseTitle);
});
}
}
);
$.ajax({
url: 'http://wkt.myhope365.com/weChat/applet/subject/list',
type: 'POST',
data: JSON.stringify({ enable: 1 }),
contentType: 'application/json',
success: function (res, status) {
res.rows.forEach(item => {
$('#box')[0].innerHTML += `<p>${item.title}</p>`
});
}
})
</script>
ajax方法对象参数属性列表
4. json
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 是轻量级的文本数据交换格式
4.1 JSON.parse和JSON.stringify
JSON.parse('{ "name":"vivy", "ability":"sing"}')//将字符串传话为JSON对象
JSON.stringify({ "name":"vivy", "ability":"sing"});//将JSON对象转化为字符串
4.2 JSONP
JSON的一种使用模式，用来解决跨域问题；
- 同源策略
同源即协议、域名、端口号都相同。http://(同为http协议)recreyed.com(相同域名):7070(相同端口号)
随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。
- 跨域
解决跨域问题的三种主要方式：
后台放开；jsonp；配置代理
后台放开:
response.setHeader("Access-Control-Allow-Origin", "*")
以后应该会写一篇解决跨域的总结
__EOF__
