Ajax
Ajax概述
Ajax简介
AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML
通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
XML简介
XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据。
比如说我有一个学生数据：
name = “孙悟空”；age = 18；gender = “男” ；
用XML 表示：
<student>
<name>孙悟空</name>
<age>18</age>
<gender>男</gender>
</student>
现已呗JSON取代
{"name":"孙悟空","age":18,"gender":"男"}
Ajax的优点
- 可以无需刷新页面与服务器端进行通信
- 允许根据用户事件来更新部分页面内容
Ajax的缺点
- 没有浏览历史，不能回退
- 存在跨域问题
- SEO不友好
HTTP相关问题
MDN文档
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview
HTTP 请求交互的基本过程
- 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
- 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
- 浏览器端接收到响应, 解析显示响应体/调用监视回调
请求报文
格式
请求行
请求头
空行
请求体
请求行
- method url
- GET /product_detail?id=2
- POST /login
多个请求头
- Host: www.baidu.com
- Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
- Content-Type: application/x-www-form-urlencoded 或者application/json
请求体
- username=tom&pwd=123
- {“username”: “tom”, “pwd”: 123}
响应报文
响应状态行
status statusText
HTTP/1.1 200 OK
多个响应头
- Content-Type：text/html; charset=utf-8
- Set-Cookie：BD_CK_SAM=1;path=/
响应体
html 文本/json 文本/js/css/图片
原生AJAX 的基本使用 XHR
安装与准备
安装node.js
http://nodejs.cn/
安装express（服务端框架）
https://www.expressjs.com.cn/
js终端
- 初始化环境
npm init --yes
- 下载express包
npm install express --save
- 编写js代码
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
// 设置响应
response.send("Hello Express");
});
// 4. 监听端口，启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中...");
})
- 运行js程序
node express基本使用.js
- 网页显示页面
- 调试程序查看请求和响应
操作基本步骤
//1.创建XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//2.设置请求信息（请求方法和url）
//请求方式
xhr.open(method, url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//3.发送请求
xhr.send(body); //get请求不传body参数，只post请求使用
//4. 接收响应（事件绑定，处理服务端返回的结果）
//xhr.responseXML 接收xml格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
//readyState是xhr对象的属性，表示状态 0初始化 1open方法调用完毕 2send方法调用完毕 3服务端返回部分结果 4服务端返回所以结果
//xhr.status响应状态码 200 404 403 401 500
if(xhr.readyState == 4 && xhr.status == 200){
//处理结果 行 头 空行 体
var text = xhr.responseText;
console.log(text);
}
}
案例
get请求
server.js
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('Hello Ajax');
});
// 4. 监听端口，启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中...");
})
前端html界面
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get请求</title>
<style>
.result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div class="result"></div>
<script>
var btn = document.querySelector('button');
var result = document.querySelector('.result');
btn.onclick = function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/server');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// 响应
console.log('状态码', xhr.status); // 状态码
console.log('状态字符串', xhr.statusText); // 状态字符串
console.log('所有响应头', xhr.getAllResponseHeaders()); // 所有响应头
console.log('响应体', xhr.response); // 响应体
//设置 result 的文本
result.innerHTML = xhr.response;
} else { }
}
}
}
</script>
</body>
post请求
server.js添加post
app.post('/server', (request, response) => {
// 设置响应头, 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
response.send("Hello Ajax POST");
});
post.html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>post请求</title>
<style>
.result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<div class="result"></div>
<script>
const result = document.querySelector('.result');
result.addEventListener('mouseover', function () {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:8000/server');
xhr.send('a=100&b=200&c=300');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
- 设置请求头
// 设置请求体内容的类型
xhr.setRequesHeader('Content-Type','application/x-www-from-urlencoded');
// 自定义头信息
xhr.setRequesHeader('name', 'ykyk');
json数据请求
json-server.js
app.all('/json-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应头, 设置允许自定义头信息
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据
const data = {
name: 'atguigu'
}
// 对 对象 进行 字符串 转换
let str = JSON.stringify(data)
// 设置响应体
response.send(str);
});
json.html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>json请求</title>
<style>
.result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<div class="result"></div>
<script>
const result = document.querySelector('.result');
window.onkeydown = function () {
// 发送请求
const xhr = new XMLHttpRequest();
// *2*.(自动转换) 设置响应体数据的类型(自动转换)
xhr.responseType = 'json';
//初始化
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
//发送
xhr.send();
//事件绑定
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
// 1. 手动对数据转化 (字符串再转换成json)
// let data = JSON.parse(xhr.response); //转换成json
// result.innerHTML = data.name;
// *2*. (自动转换)自动转换(自动转换)
result.innerHTML = xhr.response.name;
}
}
}
}
</script>
</body>
IE缓存问题
问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题
xhr.open("get", "http://127.0.0.1:8000/ie?t=" + Date.now());
请求超时与网络异常
js
//延时响应
app.get('/delay', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
setTimeout(function () {
response.send('延时响应');
}, 3000)
});
html
<body>
<button>点击发送请求</button>
<div class="result"></div>
<script>
var btn = document.querySelector('button');
const result = document.querySelector('.result');
btn.addEventListener('click', function () {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/delay');
xhr.send();
//超时设置 （2秒）
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function () {
alert('网络超时，请稍后重试')
}
// 网络异常回调
xhr.onerror = function () {
alert('网络异常，请稍后重试')
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
取消请求
<body>
<button>发送请求</button>
<button>取消请求</button>
<script>
var btns = document.querySelectorAll('button');
let x = null;
btns[0].addEventListener('click', function () {
x = new XMLHttpRequest();
x.open('GET', 'http://127.0.0.1:8000/delay');
x.send();
})
btns[1].addEventListener('click', function () {
x.abort();
})
</script>
</body>
jQuery 中的AJAX
get请求
$.get(url, [data], [callback], [type])
- url：请求的URL 地址
- data：请求携带的参数
- callback：载入成功时回调函数
- type：设置返回内容格式，xml, html, script, json, text, _default
post请求
$.post(url, [data], [callback], [type])
- url：请求的URL 地址
- data：请求携带的参数
- callback：载入成功时回调函数
- type：设置返回内容格式，xml, html, script, json, text, _default
通用方法
$.ajax({
// url
url: 'http://127.0.0.1:8000/jquery-server',
// 参数
data: {a:100, b:200},
// 请求类型
type: 'GET',
// 响应体结果
dataType: 'json',
// 成功的回调
success: function(data){console.log(data);},
// 超时时间
timeout: 2000,
// 失败的回调
error: function(){console.log('出错拉~');},
// 头信息
headers: {
c: 300,
d: 400
}
})
跨域
同源策略
- 同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
- 同源： 协议、域名、端口号必须完全相同
- 跨域： 违背同源策略就是跨域
JSONP
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明
才智开发出来，只支持get 请求。
如何工作
在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用script 标签的跨域能力来发送请求的。
使用
//1.动态创建一个script 标签
var script = document.createElement("script");
//2.设置script 的src，设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};
//3.将script 添加到body 中
document.body.appendChild(script);
//4.服务器中路由的处理
router.get("/testAJAX" , function (req , res) {
console.log("收到请求");
var callback = req.query.callback;
var obj = {
name:"孙悟空",
age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");
});
jQuery 中的JSONP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">按钮</button>
<ul id="list"></ul>
<script type="text/javascript" src="./jquery-1.12.3.js"></script>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btn')
btn.onclick = function () {
$.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",function(data) {
console.log(data);
//获取所有的电影的条目
var subjects = data.subjects;
//遍历电影条目
for(var i=0 ; i<subjects.length ; i++){
$("#list").append("<li>"+
subjects[i].title+"<br />"+
"<img src=\""+subjects[i].images.large+"\" >"+
"</li>");
}
});
}
}
</script>
</body>
</html>
CORS
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方
案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持
get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些
源站通过浏览器有权限访问哪些资源
如何工作
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
以后就会对响应放行。
使用
主要是服务器端的设置：
router.get("/testAJAX" , function (req , res) {
//通过res 来设置响应头，来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
res.set("Access-Control-Allow-Origin","*");
res.send("testAJAX 返回的响应");
});
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
