Jquery第四弹 Ajax HTTP

1.HTTP协议

超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。

通俗点来讲，超文本传输协议就是一种约定，一种规范，规定了浏览器和服务器之间互相通信的规则
约定的就是请求（浏览器向服务器通信）和响应（服务器根据请求进行处理，返回给浏览器的结果）。

1.2.报文

HTTP请求由三部分组成，分别是：请求行、请求头、请求体。

HTTP响应由三部分组成，分别是：响应行、响应头、响应体。

请求行由请求方法字段Request Method、URL字段和HTTP协议版本字段3个字段组成。

请求头部由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔。请求头部通知服务器有关于客户端请求的信息，典型的请求头👇

1.3.Request method

GET：请求指定的页面信息，并返回实体主体。
HEAD 类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
PUT：从客户端向服务器传送的数据取代指定的文档的内容。
DELETE：请求服务器删除指定的页面。
CONNECT HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS：允许客户端查看服务器的性能。
TRACE：回显服务器收到的请求，主要用于测试或诊断。
PATCH：是对 PUT方法的补充，用来对已知资源进行局部更新。

1.4. 浏览器访问HTTPS经历

首先客户端发起访问，服务器端返回CA证书（包含公钥），客户端收到后就会验证CA，然后使用随机数生成主密钥，使用公钥加密主密钥，用主密钥加密数据，然后发送给服务器，服务器拿到后，使用私钥解密出主密钥，再使用主密钥解密数据。

2.html" title=ajax>ajax

2.1.html" title=ajax>ajax简介

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML，是指一种创建交互式网页应用的网页开发技术。
用html" title=js>js通过html" title=http>http协议向服务器发送xml数据，目前html" title=js>json比较流行。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

2.2.Ajax优缺点

优点
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无须刷新整个页面
- 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高
缺点
- AJAX并不适合所有场景，很多时候还是要使用同步交互
- AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大
- 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题

2.3.原生Ajax

创建Ajax对象
连接到服务器
发送请求
接收返回值

2.3.1.发送请求

XMLHttpRequest的方法👇

XMLHttpRequest的属性

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>原始的Ajax</title>
		<script src="html" title=js>js/jquery-1.12.4.html" title=js>js"></script>
		<script type="text/javascript">
			window.onload = function() {
				var btn1 = document.getElementById("btn1");
				btn1.onclick = function() {
					//1.创建XMLHttprequest对象
					//考虑IE浏览器的兼容性问题
					if(window.XMLHttpRequest) {
						//ie7以上包括火狐 谷歌 苹果 欧朋
						var oAjax = new XMLHttpRequest();
					} else {
						//ie6及以下
						var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
					}
					//2.对发送请求进行初始化，调用open方法
					//open("请求方式"，"请求地址"，"同步/异步(false/true默认)")
					oAjax.open("GET", "html" title=js>js/ddd.txt", true);
					//3.发送请求
					oAjax.send();
					//4.为XMLHttprequest添加onreadystatechange事件
					/*
					 * 当服务器信息返回的时候调用,每个请求状态都会自动触发这个事件
					 */
					oAjax.onreadystatechange = function() {
						//onreadystatechange与服务器发生交互时，触发这个事件
						//根据状态码来确定服务器有没有发送过来内容
						//readystate:告诉浏览器和服务器进行到哪一步了
						/*
						 * 0: 请求初始化
						 * 1: 服务器已经建立连接 (执行完open()方法)
						 * 2: 请求已经被接受
						 * 3: 请求处理中
						 * 4: 请求完成，响应就绪
						 */
						//5.判断是否发送完成
						if(oAjax.readyState == 4) {
							//6.判断是否响应完成
							if(oAjax.status == 200) {
								//7.打印响应内容
								//responseText:获取响应的文本内容
								alert("请求响应成功:" + oAjax.responseText);
							} else {
								alert("请求失败" + oAjax.status);
							}
						}
					}

				}
			}
		</script>
	</head>

	<body>
		<button id="btn1">提取内容</button>
	</body>

</html>

ddd.txt 👇

aaaaaaaaaaaaaaa

发送请求时三个关键部分

onreadystatechange 事件处理函数
- 该事件处理函数由服务器触发，而不是用户。
- 在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。每次 readyState 属性的改变都会触发 readystatechange 事件。
open(method, url, asynch)
- method：请求类型，类似于‘GET’或者‘POST’的字符串。
- url：路径字符串，指向你所请求的服务器文件。
- asynch：表示请求是否异步传输，默认值为true，表示异步，即在读取后面的脚本之前，不需要服务器的响应
send(data)
- data：将要传递给服务器的字符串。若选用的是 GET 请求，则不会发送任何数据。

2.3.2.接收响应

在 Ajax处理过程中，XMLHttpRequest 的如下属性可被服务器更改：

readyState
- readyState属性表示Ajax请求的当前状态，它的值用数字表示：
  - 0 代表未初始化。还没有调用 open 方法
  - 1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
  - 2 代表已加载完毕。send 已被调用。请求已经开始
  - 3 代表交互中。服务器正在发送响应
  - 4 代表完成。响应发送完毕
- 每次readyState值的改变，都会触发readyStateChange事件。把readyStateChange事件交给一个函数处理，那么每次readyState值的改变，都会触发这个函数。
status
- 服务器返回的每个响应都有首部信息，其中包含三位数的状态码。
  - 200：一切正常
  - 404：没找到页面
- 在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里，在判断readyState==4成功之后，把status与200比较，确保服务器是否成功响应。
responseText
- XMLHttpRequest的responseText文本属性包含了服务器返回的数据，数据格式为字符串，数据内容可以是HTML、XML或者普通文本，这取决于服务器发送的内容。
- 当readyState属性值变成4的时候，无论status是多少，responseText属性都可以用，表明Ajax请求已经结束。
responseXML
- 如果来自服务器的响应数据是XML时，才可以使用此属性，如果不是，就是用responseText。

2.4.jQuery 与 AJAX

2.4.1. $.html" title=ajax>ajax()

$.html" title=ajax>ajax()只有一个对象类型的参数，这个对象包含请求设置和回调函数，以kv对兴形式存在，常用参数👇

url：String类型，表示请求地址
type：String类型，表示请求方式（post/get），默认为get
data：String类型或者Object类型，表示发送到服务器的数据
dataType：String类型，表示表示预期服务器返回的数据类型
async：Boolean类型，表示是否异步请求，默认为true，即异步请求
contentType：String类型，表示发送到服务器的数据内容编码类型
complete：Function类型，表示请求完成后调用的函数（请求成功或者失败都调用）
error：Function类型，表示请求失败时调用的函数，有三个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象

success：Function类型，表示请求成功后调用的函数，有两个参数（1）由服务器返回，并根据dataType参数处理后的数据（2）描述状态的字符串

  <head>
  	<meta charset="UTF-8">
  	<title></title>
  	<script src="html" title=js>js/jquery-1.12.4.html" title=js>js"></script>
  	<script type="text/javascript">
  		$(function() {
  			//给按钮绑定点击事件
  			$("#btn1").click(function() {
  				$.html" title=ajax>ajax({
  					type: "get", //请求方式
  					url: "html" title=js>js/user.html" title=js>json", //请求地址
  					data: { //向服务器发送的数据
  						"name": "talent"
  					},
  					//预期返回类型,服务器返回数据的时候自动封装成html" title=js>json类型
  					dataType: "html" title=js>json",
  					//请求成功以后调用的回调函数
  					success: function(data) { //data是服务器响应过来的数据
  						console.log(data);
  					}
  				});
  			})
  		})
  	</script>
  </head>

  <body>
  	<button id="btn1">获取值</button>
  </body>

[
{
“userId” : 1,
“userName” : “zhangsan”
},
{
“userId” : 2,
“userName” : “lisi”
}
]

2.4.2. $.get()

$.get(url, callback)有两个参数,（1）url表示请求地址，为必须参数（2）callback表示请求成功后调用的函数，为可选参数

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="html" title=js>js/jquery-1.12.4.html" title=js>js"></script>
		<script type="text/javascript">
			/*
			 * $.get("url","data","callback","预计服务器返回地数据格式")
			 */
			$(function() {
				$("#btn1").click(function() {
					$.get("html" title=js>js/user.html" title=js>json", function(data) {
						console.log(data);
					},"html" title=js>json")
				})
			})
		</script>
	</head>

	<body>
		<button id="btn1">get获取值</button>
	</body>

</html>

user.html" title=js>json👇

html" title=js>json">[
	{
		"userId" : 1,
		"userName" : "zhangsan"
	},
	{
		"userId" : 2,
		"userName" : "lisi"
	}
]

2.4.3. $.post()

$.post(url, data, callback )有三个参数，（1）url表示请求地址，为必须参数（2）data表示要发送给服务器的数据，为可选参数（3）callback表示请求成功后调用的函数，为可选参数

Jquery第四弹 Ajax HTTP

相关文章

Java 第一弹类与对象对象存储参数传递封装构造方法

java第二弹方法重载方法重写继承 this super 访问修饰符

java第三弹 String参数传递变量存放机制

java第四弹多态 final static 代码块抽象类匿名类接口 Java8新特性：接口增强

Vue 学习17——轮播图-实现机制

java第五弹装箱和拆箱常用类：Object类、String类、日期类

java第六弹集合泛型异常

java第七弹 IO流