AJAX
2017-10-21 本文已影响0人
ADMIN_drict
1.什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
2.AJAX 工作原理
AJAX
3.GET和POST
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
4.异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
共同点： 都是向服务器请求数据的方式
GET POST
数据放在地址栏后 ?reg=123&psw=123 send(数据参数)
数据量小 数据量大
安全性低 安全性高
传输速度快
5.HTTP协议
HTTP是一个属于应用层的面向对象的协议, 由于其简捷,快速的方式, 适用于分布式超媒体信息系统.
HTTP协议的主要特点有:
1, 支持客户端/服务端模式. 即请求(request)-响应(response)模式
2, 简单快速, 客户端向服务端发送请求时, 只需要传送请求方式和路径即可,所以简单, 由于HTTP协议简单, 使得HTTP服务器的程序规模小, 因而速度很快;
3, 灵活, 传输数据类型种类多
4, 无连接, 请求一次服务器后立刻断开连接, 即非长连接, 即短连接
5, 无状态, HTTP协议对事务处理没有记忆能力; session
HTTP协议的请求方式: GET, POST, HEAD, PUT等
HTTP包含: 请求头和请求体 响应头和响应体
HTTP 协议中， 状态码
404: 找不到服务器中的资源
403: 服务器缓存
500： 服务器故障
200: 【正常】返回
400: 语法错误导致服务器不识别
503: 由于服务器过载或维护导致无法完成请求
6.封装 ajax 请求的函数
参数：obj 是一个对象，其中包含如下属性
method 请求数据的方式： GET， POST
url 请求数据的地址
data 请求的数据， 对象的形式 {regname:123, psw:123}
async true：异步 否则就是同步
success 成功的回调函数
failture 失败的回调函数
7.ajax实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<marquee>滚来滚去</marquee>
<button id="btn"> 加载人员数据 </button>
</body>
<script>
var oBtn = document.getElementById("btn");
oBtn.onclick = function() {
// 1. 创建对象
var xhr = new XMLHttpRequest();
// 2. 准备
xhr.open("GET", "http://localhost:8080/ajax/person", true);
// 3. 发送
xhr.send();
// 4. 获取数据
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 获取数据。【注意】类型是字符串，因为网络传输的是字符
var str = xhr.responseText;
// 字符串转 js 对象 【一定要记得转换下】
var obj = JSON.parse(str);
// 更新到页面上
gx(obj)
}
}
}
function gx(obj) {
// 创建表格
var oTable = document.createElement("table");
// console.log(obj.total);
var arr = obj.data;
for (var i = 0; i < arr.length; i++) {
// arr[i] 是1个对象
// 创建表格的行
var oTr = document.createElement("tr");
// name， age, sex, phone, address, qq
// 循环遍历 对象 arr[i]
var o = arr[i];
// 练习： 完善人员的数据信息。 16:33对对
for (var j in o) {
// 创建行中的td
var oTd = document.createElement("td");
oTd.innerHTML = o[j]
oTr.appendChild(oTd);
}
oTable.appendChild(oTr);
}
document.body.appendChild(oTable)
}
</script>
</html>
8.ajax封装实例
第一步：先封装一个函数
// 封装1个函数，请求数据
/*
* 参数：
* url 请求的地址与参数
* callback 回调函数
*/
function ajax(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var str = xhr.responseText;
callback && callback(str);
}
}
}
第二步：调用并输出结果
<!-- 引入库文件 -->
<script type="text/javascript" src="js/ajax-1.0.js" ></script>
<script>
// 请求足球的信息
var url = "http://localhost:8080/ajax/football?pageNo=1&pageCount=4";
ajax(url, function(str) {
console.log(str);
});
</script>
