AJAX入门以及get和post请求
优点:
1在不刷新的情况下,与服务端进行通信; **突出优势**
2允许根据用户事件来更新部分页面
缺点:
1没有浏览历史不能回退;
2存在跨域问题(同源),即从a.com向b.com 发送请求是不可以的
3.SEO不友好 (Search Engine Optimization) 搜索引擎优化
同源: 协议,端口号,域名,必须完全相同
违背同源策略就是跨域.
跨域解决方案:
1JSONP (只支持get请求)
利用script标签来实现跨域, link img iframe 等
2.CORS(官方推出) 完全在服务端处理
请求报文和响应报文的格式: 行 头 空行 体
Access-Control-Allow-Origin 响应头指定了该响应的资源是否被允许与给定的origin共享。
语法:
Access-Control-Allow-Origin: * //允许所有资源都可以访问您的资源 Access-Control-Allow-Origin: <origin>
如需允许特定域名 如(https://developer.mozilla.org)访问您的资源， 您可以设置：
Access-Control-Allow-Origin: https://developer.mozilla.org
案例1: get()方法
在启动前:(已经安装了node.js,它包括了npm)
需要用npm安装express,即在终端中执行命令：npm install express 。
安装好后并且执行node server.js(当然还是很可能不成功,建议去看尚XX的视频,细节太多了说不完)
html:
<!DOCTYPE html>
<html lang="en">
<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></title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px aqua;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
var result = document.querySelector('#result')
var btn = document.querySelector('button')
btn.onclick = function () {
//创建对象
const xhr = new XMLHttpRequest();
//初始化
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//发送
xhr.send();
//
//readystate是 xhr对象中的属性,表示状态:
// 0被初始化 1open调用完毕 2send方法调用完毕 3服务端返回的部分的结果 4服务端返回的所有结果
//change 可以触发4次
xhr.onreadystatechange = function () {
//判断 (服务端返回了所有的结果)
if (xhr.readyState === 4) {
//判断响应状态码 200 404 401 500 302(一直没法请求,在重新读缓存)
//2XX 都是成功,具体的200-300都是成功
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果 行 头 空行 体
//1.响应行
console.log(xhr.status); //状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response); //响应体
//设置 reslut的文本
result.innerHTML = xhr.response; //点击即可出现 hello GET
} else {
}
}
}
}
</script>
</body>
</html>
server.js:(文件名最好是这个,不然要去调代码,把server换成你想的)
//1.引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3.创建路由规则
app.get('/server', (request, response) => {
//设置响应头 为了设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('hello GET ');
});
//4.监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动, 8000 端口监听中....')
})
get和post请求的对比：
get——从指定的资源请求数据；
post——向指定的资源提交要被处理的数据。
查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：
/test/demo_form.php?name1=value1&name2=value2
查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：
POST /test/demo_form.php HTTP/1.1
Host: kkxx.com
name1=value1&name2=value2
Host: kkxx.com
name1=value1&name2=value2
get: 可以缓存，不够安全， 请求有长度限制，可以前进后退，只应用于取回数据。数据类型只允许ASCII 字符。
post：不可缓存，安全，请求长度没有限制。对数据类型也没有限制
浙公网安备 33010602011771号