Ajax知识点总结

最新推荐文章于 2024-04-03 18:23:44 发布

只管去努力

最新推荐文章于 2024-04-03 18:23:44 发布

阅读量650

点赞数 1

文章标签： js ajax

本文链接：https://blog.csdn.net/weixin_53011724/article/details/110564230

版权

Ajax知识点总结

下面我将通过几个方面来简单总结一下ajax中的基础知识点：

一 ajax简介：

ajax的全称是Asynchronous Javascript And XML（异步的js和xml），是前端项目与后台服务器
产生联系的一种技术。ajax通过http协议发送请求给对应的服务器，服务器进行处理然后发送响应给浏览器端进行数据上的处理。

在这里插入图片描述

二 ajax-http协议的请求报文构成：

请求报文的构成：
http请求报文分为三部分：请求行，请求头，请求体
1）请求行：请求行包括三个部分method request-URL http-version,既请求的方式、请求发送的URL，http协议的版本号
请求行例如： GET /icwork/? Search = product HTTP/1.1
2）请求头：
请求头包含：

Accept：指浏览器或其他客户可以接爱的MIME文件格式。Servlet可以根据它判断并返回适当的文件格式。

User-Agent：是客户浏览器名称

Host：对应网址URL中的Web名称和端口号。

Accept-Langeuage：指出浏览器可以接受的语言种类，如en或en-us，指英语。

connection：用来告诉服务器是否可以维持固定的HTTP连接。http是无连接的，HTTP/1.1使用Keep-Alive为默认值，这样，当浏览器需要多个文件时(比如一个HTML文件和相关的图形文件)，不需要每次都建立连接

Cookie：浏览器用这个属性向服务器发送Cookie。Cookie是在浏览器中寄存的小型数据体，它可以记载和服务器相关的用户信息，也可以用来实现会话功能。

Referer：表明产生请求的网页URL。如比从网页/icconcept/index.jsp中点击一个链接到网页/icwork/search，在向服务器发送的GET/icwork/search中的请求中，Referer是http://hostname:8080/icconcept/index.jsp。这个属性可以用来跟踪Web请求是从什么网站来的。

User-Agent：是客户浏览器名称。

Content-Type：用来表名request的内容类型。可以用HttpServletRequest的getContentType()方法取得。

Accept-Charset：指出浏览器可以接受的字符编码。英文浏览器的默认值是ISO-8859-1.

Accept-Encoding：指出浏览器可以接受的编码方式。编码方式不同于文件格式，它是为了压缩文件并加速文件传递速度。浏览器在接收到Web响应之后先解码，然后再检查文件格式。

3）请求体：
请求发送的参数和值

例如请求数据：

代码例子：
1 GET/sample.jspHTTP/1.1
2 Accept:image/gif.image/jpeg,/
3 Accept-Language:zh-cn
4 Connection:Keep-Alive
5 Host:localhost
6 User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
7 Accept-Encoding:gzip,deflate
8
9 username=jinqiao&password=1234
复制代码
第一行为http请求行，包含方法，URI 和http版本

1-7为请求头，包含浏览器，主机，接受的编码方式和压缩方式

第8行表示一个空行表示请求头结束 这个空行是必须的

第9行是数据体，比如是需要查询的信息。

三响应报文的构成：

http响应体由三部分组成：

http响应由三个部分组成分别是状态行，响应头，响应正文。

状态行是由：HTTP-Version+Status-Code+Reason-Phrase
比如：HTTP/1.1 200 ok
分别表示http版本 + 状态码 + 状态代码的文本描述

状态码：
1xx 指示信息–表示请求已接收，继续处理
2xx 成功–表示请求已被成功接收、理解、接受
3xx 重定向–要完成请求必须进行更进一步的操作。
4xx 客户端错误–请求有语法错误或请求无法实现。
5xx 服务器端错误–服务器未能实现合法的请求。

响应头：包含服务器类型，日期，长度，内容类型等
Server:Apache Tomcat/5.0.12
Date:Mon,6Oct2003 13:13:33 GMT
Content-Type:text/html（一般为json，表示数据已json的形式发送）
Last-Moified:Mon,6 Oct 2003 13:23:42 GMT
Content-Length:112

响应正文（响应体）：就是服务器返回的HTML页面或者数据，服务器返回的数据会根据请求头的要求返回具体的数据，一般返回的数据种类有XML HTML JSON三种数据类型。

四几种不同的方法实现ajax请求：

用原生js的ajax技术发送请求：
根据http请求的构成（三部分），在创建一个http请求的时候也可以将步骤分为三步
通过js中封装的XMLHTttpRequest()构造一个对象；
XMLHttpRequest对象方法
在这里插入图片描述
XMLHttpRequest对象的属性

通过open方法构建一个请求行；
setRequestHeader方法构建一个请求头信息；
构建一个参数数据请求体；
最后通过send方法发送http请求；
我们可以通过onreadystatechange=function（）{}//处理服务请发送的响应

//首先通过XMLHttpRequest构造函数，生成一个相应的对象
XMLHttpRequest xhr=new XMLHttpRequest();
//调用xhl对象的open方法 该方法有三个参数 method URL async    
open(method,url,async);
	method 方法有 get和post
	url 表示要请求的文件的路径
	async 表示异步(true)还是同步  （可选项，默认值为true）
//调用send方法发送请求
/*send 方法使用规则：
，send(data)：

a)，open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令

b)，data：将要传递给服务器的字符串。

c)，若选用的是 GET 请求，则不会发送任何数据，给 send 方法传递 null 即可：request.send(null);

d)，当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.
*/
var data={};
xhl.send(data);
xhl.onreadystatechange=funtion(){}

****使用jQuery发送ajax请求：****

$.ajax({
		type: 'get', /*  请求方式  GET  、 POST 、 PUT 等.. */
		url: 'findApi', /*  后台的接口(findApi)  使用相对路径即可 */
		dateType: 'json', /*  期望服务器返回的数据类型格式 */
		async：false，//async用来设置请求是同步还是异步，默认是异步（ture）
		data：{}，数据参数；
		success: function(result) { // 请求后台 应答成功返回来的数据 
			console.log(result);
			},
			error: function(xhr, status, error) { // 请求失败运行的函数
			   console.log(error);
				}
			})
			//jquery调用ajax请求，还有一些方法可以参考jQuery手册。

****使用axios发送ajax请求：****

//配置baseURL
	//在使用axios之前得通过npm引入相应的插件（模块）
	 axios.defaults.baseURL = "http://127.0.0.1:8000";//服务器端的IP和端口号
 axios({
                    //请求方法
                    method:"post",
                    //url
                    url:"/axios-server",
                    //url参数
                    params:{
                        a:100,
                        b:200
                    },
                    //设置请求体参数
                    data:{
                        username:"ltf",
                        password:"ltf"
                    }
                }).then(response=>{//处理响应结果
                    console.log(response);
                    //响应状态码
                    console.log(response.status);
                    //响应状态字符串
                    console.log(response.statusText);
                    //响应头信息
                    console.log(response.headers);
                    //响应体
                    console.log(response.data);
                })
                //axios还有一些具体的方法，可以通过axios官网去查看。

****用fetch函数发送ajax请求：****

	//两个参数，第一个是服务器的地址，第二个是请求函数
	fetch（‘http://127.0.0.1:8080/fetch?参数’,{
		method :'post',    //请求的方法
		headers:{    //请求头
		
		},
		body:       //请求体
	}）.then(response=>{
	//响应处理函数
})

五 jsonp实现跨域问题：

同源策略：
所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），浏览器支持的是同源协议，这样可以尽可能的保护网页的安全。
什么是跨域：
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
实现跨域：
HTML中的部分标签具有跨域能力：例如 …

具体实现跨域问题可以参考下面这一篇博客：

如何实现跨域问题

总结：

		实现客户端与服务器端之间的联系方法有很多，ajax只是其中一种。ajax在前端应用的是最为广泛的。其实在上面列举的几种实现ajax请求方法，本质上都是在原生js上得改进（封装）。通过理解XMLHttpRequest类实现ajax请求，后面的几个不同的实现方法都可以很容易懂。

只管去努力

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Ajax知识点总结

Ajax知识点总结下面我将通过几个方面来简单总结一下ajax中的基础知识点：一 ajax简介：ajax的全称是Asynchronous Javascript And XML（异步的js和xml），是前端项目与后台服务器产生联系的一种技术。ajax通过http协议发送请求给对应的服务器，服务器进行处理然后发送响应给浏览器端进行数据上的处理。二 ajax-http协议的请求报文构成：请求报文的构成：http请求报文分为三部分：请求行，请求头，请求体1）请求行：请求行包括三个部分method
复制链接

扫一扫