在ajax出现以前,程序员为了发请求想出了很多hack的办法,下面介绍五个.
- 用form表单发请求,会刷新或新开页面.
- 用 a 标签发请求,会刷新或新开页面.
- 用 img 标签发请求,只能以图片的形式展示.
- 用 link 标签发请求
- 用 script 标签发请求,只能以脚本的形式运行.
<form action='path' method='get'>
<input type='passdword' name='password'>
<input type='submit'>
</form>
通过开发者工具可查看到请求头里的路径为 /path?password=aaa ,aaa为输入的信息.如果采用的是 post 方法,输入的信息则会在第四部分显示,格式为 password = aaa.
<a href='/path'>button</a>
<script>
var image = document.createElement('img');
image.src = '/path';
</script>
这样在加载这段代码后就会向此网站的 /path 路径发出请求.
<script>
var link = document.createElment('link');
link.rel = 'stylesheet';
link.href = '/path';
document.appendChild(link);
</script>
在加载这段代码后就会向此网站的 /path 路径发出请求.
<script>
var script = document.createElement('script');
script.src = '/path';
doument.body.appendChild(script);
</script>
在加载这段代码后就会向此网站的 /path 路径发出请求.
1.使用XMLHttpRequest发请求. 2.服务器返回XMl格式的字符串. 3.JS解析XML,并更新局部页面.对于Http来说,响应的第四部分始终是字符串.服务器返回给浏览器的是符合Xml格式的字符串.
接下来来模仿一下服务器与浏览器的"交流"过程.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AJAX</title>
</head>
<body>
<button id="myButton">点我</button>
<script src="./mian.js"></script>
</body>
</html>
myButton.addEventListener('click',(e)=>{
let request = new XMLHttpRequest();
request.open('get','./content');
response.setRequestHeader('Content-type',"text/html");
request.onreadystatechange = ()=>{
if(request.readyState === 4){
console.log('请求完毕')
if(request.status >= 200 && request.status <= 300){
console.log('请求成功');
let string = request.responseText;
let object = JSON.parse(string)
parser.parseFromString(request.responseText,'text/xml')
}else if(request.status >= 404){
console.log('请求失败')
}
}
}
request.send()
})
1. readyState()各个值的含义.
值 描述 0 尚未调用 open() 方法。 1 open() 方法已经被调用。。 2 send() 方法已经被调用，并且头部和状态已经可获得。 3 下载中； responseText 属性已经包含部分数据。。 4 下载已完成。
.open(method, url, async, user, password);
open()方法有五个值,后三个为可选值(一般选用默认值).method为HTTP方法,可选值有put, get, delete, post等.url即要想起发送请求的url.
.setRequestHeader()必须放在open和send之间.send里的内容在使用get方法时会被忽略.
if (path == '/') {
response.statusCode = 200
let string = fs.readFileSync("./lesson34.html", 'utf-8')
response.setHeader('content-Type', 'text/html;charset=utf-8')
response.write(string)
response.end()
} else if (path == '/main.js') {
response.statusCode = 200
let string = fs.readFileSync('./main.js', 'utf-8')
response.setHeader('content-Type', 'text/javascript;charset=utf-8')
response.write(string)
response.end()
} else if (path === '/content') {
response.statusCode = 200;
response.setHeader('Content-Type', 'text/xml;charset=utf-8')
response.write(` //只能接收字符串
{
"note":{
"to":"小姑",
"from":"东东",
"heading":"打招呼",
"body":"你好"
}
}
`)
response.end();
}
else{
response.statusCode = 404;
response.end()
}
因为同源策略,使用AJAX时不同的网站(协议+域名+端口不同)之间不能互相请求(发了请求也不会响应).如果想发请求给对方并获得响应只需要设置 response.setRequestHeader('Access-Control-Allow-Origin','网址'),该'网址'即可对'本'网站发送请求并得到响应.
