(供自己后期复习使用,如果哪里不对希望大佬指正)
Ajax
1.什么是Ajax
AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。
AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式
2.Ajax的优缺点
优点:1) 可以无需刷新页面而与服务器端进行通信。
2) 允许你根据用户事件来更新部分页面内容。
缺点:1) 没有浏览历史,不能回退
2) 存在跨域问题(同源)
3) SEO 不友好
3.了解http协议
HTTP(hypertext transport protocol)协议『超文本传输协议』,协议详细规定了浏览器和万维网服务器之间互相通信的规则。
约定, 规则
请求报文(请求服务器时,向服务器发送的数据)
重点是格式与参数
行 POST /s?ie=utf-8 HTTP/1.1
头 Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin
响应报文(服务器返回的数据)
行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
content-encoding: gzip
空行
体 <html>
<head>
</head>
<body>
<h1>尚硅谷</h1>
</body>
</html>
4.Ajax的基本使用
这里用的是Ajax一些基本的方法,若是有时间可以查看官方文档查看其他一些方法
- 实例化一个xhr对象
var xhr = new XMLHttpRequest();
- 设置请求行
xhr.open(method,url);
- 设置请求头
xhr.setRequestHeader(key,val)
例如:xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- 设置请求体,当请求方式为get的时候,data不需要设置;当请求方式为post的时候,data需要设置
xhr.send([data])
- 获取响应内容
//对onreadystatechange 的拆解
//on 当...时候
//readystate是xhr对象中的属性,表示状态0 1 2 3 4
//change 改变
xhr.onreadystatechange = function(){
//就绪状态当为4的时候表示响应成功回来了
if(this.readystate === 4){
//判断响应状态码 200 404 403 500等,在200-300中间都算成功
if(this.status === 200){
// 获取响应信息
this.response
}
}
}
-
有关的状态和状态码
1.、readyState:返回当前文档的载入状态2-(载入完成)send()方法执行完成,已经接收到全部响应内容
3-(交互)正在解析响应内容
2、 status:HTTP状态码
1XX:信息性状态码 ,表示接收的请求正在处理
2XX:成功状态码 , 表示请求正常处理
3XX:重定向状态码 ,表示需要附加操作来完成请求
4XX:客户端错误状态 ,表示服务器无法处理请求
5XX:服务器错误状态 ,表示服务器处理请求出错
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。