Ajax技术

一、Ajax技术

1.Web服务器：提供网上信息浏览服务。Node内置有Web服务器。

2.请求的资源：

（1）静态资源：只要服务器没有修改这些文件，客户端每次请求到的都是同样的内容

（2）动态资源：内容可以动态发生变化，每次请求都需要计算处理

3.http协议：超文本传输协议，是一个基于“请求”与“响应”的协议

（1）http请求：客户端（浏览器）向服务器发送的请求

（2）http响应：服务器接收到客户端的请求后做出的响应

4.http协议的请求消息

（1）请求行：请求方式、http协议的版本号

（2）请求头：服务器的url、浏览器的类型、文本格式：作用是传递附加信息

（3）实体内容

5.http的响应信息：

（1）响应行：http协议的版本号、状态码、字符描述

（2）响应头：响应文本的格式和长度、响应的时间、是否允许跨域：附加在响应信息中

（3）实体内容：服务器传递给客户端的具体内容

6.http协议的响应消息中的状态码：

• 200：表示请求-响应成功，并返回了一个页面
• 204：表示服务器已经成功处理了请求，但是并没有返回内容

3开头：表示页面发生了重定向

• 400：表示服务器不理解客户端的请求语法
• 403：表示服务器拒绝请求
• 404：表示找不到请求的资源
• 500：服务器遇到错误，无法完成请求
• 503：服务器无法使用

7.互联网中文件的通用格式：大类别/具体类别

text/plain —>表示普通文本

text/html ---->网页文件

text/xml ----->xml文件

text/css ------>样式文件

application/JavaScript ---->JavaScript文件

8.前后端交互

（1）前端开发：浏览器端程序开发

（2）后端开发：服务器端程序开发。后端给前端提供服务。

（3）表单交互：客户端向服务器端提交数据，通过表单控件向服务器端发送数据

（4）URL参数交互：向服务器提交查询数据。例如：http://localhost:3000/index?username=李四

9.什么是Ajax？
（1）Ajax：Asynchronous JavaScript + XML（异步JavaScript和XML）,指的是一套综合了多项技术的浏览器端网页开发技术。使用Ajax技术以后， 网页应用能够快速地将数据更新查询等呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

（2）Ajax的核心：XMLHttpRequest对象，该对象在使用之前必须使用JavaScript来获取

（3）XMLHttpRequest对象的方法：

（1）open（‘method’,url）---->建立与服务器之间的连接

​ ①参数“method”是请求的方式：get、post

​ ②参数“url”是远程服务器的地址

​ （2）send（content）：是向服务器发送请求，参数“content”表示请求数据，可以是null

​ （3）setRequestHeader(“header”,“value”)：设置请求头信息，必须放在open之后调用

（4）XMLHttpRequest对象的属性：

• Onreadystatechange：指定当请求-响应的状态发生变化时执行的回调函数

• ​ readyState：是一个状态值，表示请求-响应完成的一种状态

• ​ responseText：服务器响应的文本

• ​ status：服务器返回的状态码（例如：200）

• statusText：伴随状态码返回的字符串响应信息（例如：200对应的字符串是OK）

二、jQuery对Ajax的封装

1.底层封装，使用比较灵活

$.ajax({

	url:'远程服务器的地址',

	type:'请求方式',	

	data:'发送给服务器的数据',

	dataType:'服务器返回的数据格式',

	success:function(data){  //请求成功后的回调函数，参数data中放的是服务器的响应数据

	},

	error:function(err){ //请求失败的回调函数，参数err中存放的是错误信息

	}

})

2.高层的封装
（1）post请求：

$.post(url,data,callback,type);
//参数含义
url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default

示例代码：

let obj = {
   name:"李四",
   age:44,
   gender:'男'
};
$.post(
	'http://localhost:8090/index',
	obj,
	function(result){'成功后的处理代码'},
	'json'
);

（2）get请求：

$.get(url,data,callback,type);
//参数含义
url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。
//用法和post请求差不多

三、小结

1.原生的Ajax我们需要一定的了解，知道如何使用Ajax实现异步的请求
2.在开发过程中，我们使用最多的是封装过后的Ajax请求方式，jQuery的封装是其中的一种，后续我们会了解其他的封装好的Ajax请求方法。