1.用 form 可以发请求，但是会刷新页面或新开页面
<form action=”xxx” method=”get”>
<input type=”password” name=”password”>
<input type=”submit”>
</form>
form表单用get方式提交，默认会在路径后加一个查询参数也就是（action里的路径）?（可以输入的input类型里的name）=（你输入的东西）
上面这个就是/xxx?password=你输入的东西；
如果有多个input的name那么他就会用&给你连接起来：
<input type="password" name="password">
<input type="text" name="name">
请求头里的路径就是/xxx?password=你输入你内容&name=你输入的内容
Post方法：
<form action="/xxx" method="post">
<input type="password" name="password">
<input type="text" name="name">
<input type="submit">
</form>
用form发送post请求，与get请求区别是post请求没有查询参数
post请求的第四部分 password在下面的 Form Data 的view source 里
2. 用 a 可以发 get 请求，但是也会刷新页面或新开页面
//点击后触发路径为/xxx的get请求
<a id=”x” href=”/xxx”>click</a>
//运行一个脚本，让网页自己点击（但是依然会刷新页面）
<script>
x.click()
</script>
3. 用 img 可以发 get 请求，但是只能以图片的形式展示
var image = dcoment.createElement(‘img’);
image.src = ‘/xxx’;
image.onload = function(){
console.log(‘success’);
}
image.onerror = function(){
console.log(‘fail’);
}
4. 用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示，和script一样都必须得添加到页面中才可以
var link = document.createElement(‘link’);
link.rel = ‘stylesheet’;
link.href = ‘/xxx’;
document.head.appendChild(link)
5. 用 script 可以发 get 请求，但是只能以脚本的形式运行
<script>
var script = document.createElement('script')
script.src = "/xxx"
//需要将script放到页面中才能发送请求
document.head.appendChild(script)
</script>
AJAX
A： async异步 J：javascript A：And X：xml
- Jesse James Garrett 讲如下技术取名叫做 AJAX：异步的 JavaScript 和 XML
- 使用 XMLHttpRequest (全局变量) 发请求
- 服务器返回 XML 格式的字符串
- JS 解析 XML，并更新局部页面
用node服务器来尝试一下这三个条件(AJAX)
新建html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
hi
</body>
</html>
Node代码
console.log('含查询字符串的路径\n' + pathWithQuery)
if (path === '/') {
var string = fs.readFileSync('./index.html', 'utf8')
response.statusCode = 200
response.setHeader('Content-Type', 'text/html; charset=utf-8')
response.write(string)
response.end()
} else{
response.statusCode = 404
response.setHeader('Content-Type', 'text/html; charset=utf-8')
response.write('找不到服务器')
response.end()
}
对于HTTP来说，响应的第四部分始终是string
在 html 里创建一个button，引入当前目录下的 js 文件
<body>
<button id="myButton">点我</button>
<script src="./main.js"></script>
</body>
Node代码//在原Node代码中插入，下同
//注意这里是 /main.js 而不是 ./main.js，因为HTTP请求永远是绝对路径
else if (path === '/main.js') {
//这里当然是./main.js
var string = fs.readFileSync('./main.js', 'utf8')
response.statusCode = 200
response.setHeader('Content-Type', 'text/javascript; charset=utf-8')
response.write(string)
response.end()
}
1. 使用 XMLHttpRequest 发请求
//创建一个实例对象
var request = new XMLHttpRequest();
//初始化一个请求（第一个参数是方法，第二个是路径，第三个是否异步默认就是异步（ajax用的就是异步，所以这个参数不需要写））
request.open('GET','/xxx');
//发送请求
request.send()
2.服务器返回 XML 格式的字符串
XML已经不流行了，但是我们依然可以尝试一下
找一个一个XML example
else if(path === '/xxx'){
response.statusCode = 200;
response.setHeader('Content-Type','text/xml;charset=utf-8');
response.write(`
<note>
<to>小谷</to>
<from>方方</from>
<heading>打招呼</heading>
<body>hi</body>
</note>
`)
response.end()
}
3.JS 解析 XML，并更新局部页面
浏览器是分步下载响应的，一般只要记住 readyState === 4 表示请求完成
可以用 onreadystatechange 监听 readyState
myButton.addEventListener('click', (e) => {
let request = new XMLHttpRequest()
request.onreadystatechange = () => {
if (request.readyState === 4) {
console.log('请求响应都完成了')
if (request.status >= 200 && request.status < 300) {
console.log('success')
//响应值在300-400之间浏览器会重新发送请求
} else if (request.status >= 400) {
console.log('fail')
}
}
}
//初始化请求，参数为:method,url,async(异步状态下才是AJAX),user,password(后三个参数一般默认)
request.open('GET', '/xxx')
request.send()
})
Ajax判断状态
let request = new XMLHttpRequest()
request.onreadystatechange = () => {
if (request.readyState === 4) {
console.log('请求响应都完成了')
if (request.status >= 200 && request.status < 300) {
console.log('请求成功')
//响应值在300-400之间浏览器会重新发送请求
} else if (request.status >= 400) {
console.log('请求失败')
}
}
}
执行上面的代码后控制台里得到上面的内容，但是却无法用js对xml进行操作和解析
利用DOM来操作xml（缺点DOM操作太过复杂）
针对上面的问题只需要在代码里加上
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(request.responseText,”text/xml”)
然后就可以像操作DOM一样通过标签名来获取它里面的内容
var c = xmlDoc.getElementsByTagName(‘to’)[0].textContent;
console.log(c)
利用JSON代替XML
JSON
JSON是道格拉斯基于JavaScript发明的数据交换语言
特点：
- 只有 object、array、string、number、true、false、null 这几种类型
- 字符串首尾必须为双引号
JS VS JSON
undefined/symbel 无
null null
['a','b'] ["a","b"]
function f(){} 无
{a:b} {"a","b"}
'hello world' "hello world"
var a = {}
a.self = a 无法做到{无变量等形式}
{__proto__} 没有原型链
用JSON替换XML
Node代码：
else if (path === '/ada') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/xml; charset=utf-8')
//变XML为JSON，key和value都可以替换成自己喜欢的
response.write(`
{
"note":{
"to": "reader",
"from": "Ada",
"heading": "greet",
"content": "hello word!"
}`)
response.end()
js完整代码
myButton.addEventListener('click', (e) => {
let request = new XMLHttpRequest()
request.onreadystatechange = () => {
if (request.readyState === 4) {
console.log('请求响应都完成了')
if (request.status >= 200 && request.status < 300) {
console.log('success')
console.log(typeof request.responseText)
console.log(request.responseText)
let string = request.responseText
// 把符合 JSON 语法的字符串转换成 JS 对应的值
let object = window.JSON.parse(string)
// JSON.parse 是浏览器提供的
//响应值在300-400之间浏览器会重新发送请求
} else if (request.status >= 400) {
console.log('fail')
}
}
}
//初始化请求，参数为:method,url,async(异步状态下才是AJAX),user,password(后三个参数一般默认)
request.open('GET', '/ada')
request.send()
})
同源政策
同源政策规定，AJAX请求只能发给同源的网址，否则就报错。
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
文章开头提到的 form 和 a 等发送请求是没有同源政策的，而AJAX是可以读取响应内容的。
因此只有 协议+端口+域名 一模一样（同源）才允许发 AJAX 请求
只有 协议+端口+域名 一模一样才允许发 AJAX 请求
- http://baidu.com可以向 http://www.baidu.com 发 AJAX 请求吗 no;因为域名不一样，一个有www一个没有。
- http://baidu.com 可以向 http://baidu.com:81/发 AJAX 请求吗 no;因为端口号不一样。
如何规避同源政策？跨域
- JSONP跨域
- CORS 跨域
什么是 CORS:Cross-Origin Resource Sharing(跨域资源共享)
同样用理解JSONP 下博客中创建过的网站来举例子
首先打开服务器端口
把请求路径改为
request.open('GET', 'http://jack.com:8002/ada')
报错了，因为不是同源，响应完成却得不到任何内容
解决方法，在Node代码中加入一句
//允许 http://ada.com:8001 访问我
response.setHeader('Access-Control-Allow-Origin','http://ada.com:8001')
这就是用CORS实现AJAX跨域的过程
网友评论