ToB企服应用市场:ToB评测及商务社交产业平台

标题: Ajax day-01 [打印本页]

作者: 愛在花開的季節 时间: 2024-9-1 08:18
标题: Ajax day-01
目次
一. Ajax
1.1 创建XMLHttpRequest对象
1.2 Ajax向服务器发送请求
1.3 设置http请求头
1.4 发送请求
1.5 获得相应
1.6 监听请求状态的改变
1.7 获取相应头
1.8 获得相应主体
1.9 处理服务器返回的数据
1.10 怎样向服务器通报数据？
二. 接口文档
三. 开发模式
3.1 前后端混淆
3.2 前后端分离
3.3 跨域和同源计谋
3.4 JSONP实现跨域请求

一. Ajax

Ajax是Asynchronous Javascript And XML（异步JavaScript和XML）的缩写。
Ajax技能形貌了使用脚本操纵HTTP和Web服务器举行数据交换，在页面不刷新的环境下，实现页面的局部更新。
重点：

Ajax 是一种在无需重新加载整个网页的环境下，可以大概更新部分网页的技能。
通过在后台与服务器举行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的环境下，对网页的某部分举行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

1.1 创建XMLHttpRequest对象

欣赏器在XMLHttpRequest类上界说了它的HTTP方法。这个范例的每个实例都表示一个独立的请求/相应对，并且这个对象的属性和方法允许指定请求细节和获取相应数据。
创建XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

复制代码

  回忆：
  一个HTTP请求由4部分组成：

HTTP请求方法(GET/POST等)
请求的URL
一个可选的请求头聚集，此中可能包含身份验证信息
一个可选的请求主体

1.2 Ajax向服务器发送请求

创建XMLHttpRequest对象之后，我们就可以使用XMLHttpRequest对象的open()方法发起请求，该方法必须要指定请求方法（GET、POST等）和URL。

xhr.open("GET", "home.html");
xhr.open('method', 'URL' [, asyncFlag [, 'userName' [, 'password']]])

复制代码

method：用于指定请求方式，如GET、POST，不区分大小写。 URL：表示请求的地点。 asyncFlag：可选参数，用于指定请求方式，同步请求为false，默认为异步请求true。 userName和password：可选参数，表示HTTP认证的用户名和密码。
请求方法不区分大小写，但通常都写成大写的情势。除了"GET"和"OST"之外，该方法还支持"DELETE"、"HEAD"、"OPTIONS"和"UT"作为第一个参数。但"TRACE"和 "CONNECT"由于安全风险已被明确克制使用。
URL用来指定请求的资源。它可以是一个相对URL（相对于当前文档的URL），也可以是一个绝对URL。如果使用的是绝对URL，则协议、主机和端口通常必须要与当前文档URL保持划一，因为跨域的请求通常会报错（在服务器允许跨域请求时，则不会报错）。

注意：
同步和异步的区别：是否阻塞代码的实行。
异步方式（默认）：好坏阻塞的，欣赏器端的JavaScript程序不消等待Web服务器相应，可以继承处理其他事情。当服务器相应后，再来处理Ajax对象获取到的相应结果。下面请看异步的实行过程，

同步方式：是阻塞的，当Ajax对象向Web服务器发送请求后，会等待Web服务器相应的数据吸收完成，再继承实行后面的代码。

1.3 设置http请求头

除了设置请求方法和URL以外，我们还可以设置请求头。POST请求一样平常是要用"Content-Type"请求头指定请求主体的MIME范例(用来形貌实体内容的编码格式)：

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//默认编码格式(数据被编码为名称/值对)
xhr.setRequestHeader("Content-Type", "application/json");//用来告诉服务端消息主体是序列化后的 JSON 字符串

复制代码

扩展阅读:Form表单的编码范例

但是有些请求头我们不能自己指定，例如"Content-Length"、"Date"、"Referer"、"User-Agent"等，XMLHttpRequest将自动添加这些头，防止伪造它们。除此之外，XMLHttpRequest对象自动处理Cookie、连接时间、字符集和编码判断，所以我们无法向setRequestHeader()通报如下的请求头：
Accept-CharsetContent-Transfer-EncodingTEAccept-EncodingDateTrailerConnectionExpectTransfer-EncodingContent-LengthHostUpgradeCookieKeep-aliveUser-AgentCookie2RefererVia 1.4 发送请求

使用XMLHttpRequest发起请求的最后一步是指定可选的请求主体并将它发送给服务器。

xhr.send(content);//Open的方式是post
xhr.send(null);//open的方式是get的一般不用send
//xhr.send('clazz=火花&name=张三&gender=男');

复制代码

GET请求没有请求体，所以应该通报null或省略这个参数。而POST请求通常具有请求主体，同时它应该与使用setRequestHeader()指定的"Content-Type"划一。
1.5 获得相应

一个完整的HTTP相应消息由状态行、相应头、空行和相应主体组成。这些都可以通过XMLHttpRequest对象的方法和方法获取。

1.6 监听请求状态的改变

为了在相应准备就绪时得到通知，必须监听XMLHttpRequest对象上的onreadystatechange事件。

xhr.onreadystatechange = function(){
};

复制代码

但为了理解这个事件范例，我需要先弄明确readyState属性。readyState属性的值是一个整数，用来指示HTTP请求的状态。readyState属性的值如下表所示：
常量值含义UNSENT0初始化，尚未调用open()方法OPENED1启动，已调用open()方法，但尚未调用send()方法HEADERS_RECEIVED2发送，已调用send()方法，吸收到相应头信息LOADING3吸收中，已经吸收到部分相应主体DONE4完成，已经吸收到全部相应数据，而且已经可以在客户端使用了在实际应用中，当readyState属性的值改变为0或1时可能不会触发这个事件。当readyState属性的值改变为4或服务器的相应完成时，全部的欣赏器都会触发readystatechange事件。因此为了判断相应是否真正完成了，我们应该在事件处理程序中时间检测readyState属性的值。

xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
console.log("请求完成了");
}
};

复制代码

但这样只能确保请求完成了，并不能确保请求成功。因此我们还需要根据相应的【状态码】来判断请求是否成功。
我们可以通过XMLHttpRequest对象的status和statusText属性获取HTTP状态码，状态消息。

xhr.status // 200
xhr.statusText // OK

复制代码

代码如下：

xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
console.log("请求完成并且成功了");
}
};

复制代码

完善的判断信息

xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
};
};
};

复制代码

1.7 获取相应头

相应头用于告知客户端本次相应的基本信息，包括服务器程序名、内容的编码格式、缓存控制等。请求头和相应头是欣赏器和服务器之间交互的重要信息，由程序自动处理，通常不需要人为干预。
使用getResponeHeader()和getAllResponeHeaders()获取相应头信息。

xhr.getResponeHeader("Content-Type") // "text/html"
xhr.getAllResponeHeaders() // 获取所有的响应头

复制代码

1.8 获得相应主体

服务器的相应实体内容有多重编码格式，当用户请求的是一个网页，实体内容的格式就是HTML，如果请求的是图片相应的就是图片，服务器为了告知欣赏器内容范例，会通过相应头中的Content-type字段来形貌，这是一种MIME常见的范例。
无论相应主体内容范例是什么，相应主体的内容都会生存到responseText和responseXML属性中；而对于非XML数据而言responseXML属性的值将为null。

xhr.responseText // 服务器端返回的文本内容

复制代码

1.9 处理服务器返回的数据

服务器返回的数据都是JSON格式的字符串，为了使用方便，我们需要先把字符串转换成JavaScript对象（Object/Array）。

JSON.parse(xhr.responseText);

复制代码

转换之后，就能以访问对象属性的方式拿到各种数据，实例如下：

// 转换成Object类型的对象
[{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"}]
// 转换成Array类型的对象
[
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"},
{"id":"0001""name":"zhangsan","age":25,"gender":true,"phone":"12342344533"}
]

复制代码

1.10 怎样向服务器通报数据？

GET方式的请求：
通报给后台的数据要拼接到URL的后面，以问号（？）开始，参数是以name=value的情势出现，每两个键值对之间以（&）分隔。例如：

'http://192.168.0.101:8080/AjaxDemo/LoginServlet?username=zhangsan&password=123456'

复制代码

POST方式的请求：
先通过请求头（Content-Type）指定命据的格式范例，常用的格式范例有两种，分别是：

application/x-www-form-urlencoded：用来告诉服务端消息主体是颠末 URL编码的字符串(窗体数据被编码为名称/值对)
application/json ：用来告诉服务端消息主体是序列化后的 JSON 格式的字符串
1. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2. xhr.setRequestHeader("Content-Type","application/json");
复制代码

然后将编码之后的数据通过send()方法传递给服务器，例如：
xhr.send(“clazz=%E7%81%AB%E8%8A%B112%E6%9C%9F&name=%E9%99%88%E6%A2%A6%E9%BE%99&gender=%E7%94%B7&age=20&hobby=%E7%9D%A1%E8%A7%89&hobby=%E6%89%93%E8%B1%86%E8%B1%86&tel=13834569928&address=%E5%8D%97%E9%98%B3&remark=%E6%96%B0%E5%90%8C%E5%AD%A6&date=2019-08-01”)。

复制代码

二. 接口文档

在实际的项目开发中，后台服务写好之后，后台职员会给前台职员一份【接口文档】，文档中列出了每个功能所需要的接口信息，我们前台职员只需要根据文档的要求与服务器举行数据交互即可。接口文档示例如下：
接口请求方式作用请求参数/api/student/getStudentGET1、获取全部学生信息 2、根据ID获取学生信息 3、根据name获取学生信息可选参数： id 学生ID name 学生姓名/api/student/removeStudentGET1、根据ID删除学生信息必传参数： id 学生ID/api/student/addStudentPOST1、添加学生信息必传参数： clazz班级 name 姓名 gender 性别 age 年龄 tel 电话 address 地点信息 remark 备注信息/api/student/updateStudentPOST1、更新学生信息必传参数：id 学生ID clazz班级 name 姓名 gender 性别 age 年龄 tel 电话 address 地点信息 remark 备注信息** 三. 开发模式

3.1 前后端混淆

前端代码与后台代码混淆编写，也就是说前端代码和后台代码同时出如今一个文件中。例如，index.php文件是由PHP代码和HTML代码混写的：

<!DOCTYPE html>
<html>
<body>
<?php
$x=5; // global scope
function myTest() {
$y=10; // local scope
echo "<p>在函数内部测试变量：</p>";
echo "变量 x 是：$x";
echo "<br>";
echo "变量 y 是：$y";
}
myTest();
echo "<p>在函数之外测试变量：</p>";
echo "变量 x 是：$x";
echo "<br>";
echo "变量 y 是：$y";
?>
</body>
</html>
//再例如，index.jsp是由 Java代码和HTML代码混写的：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>life.jsp</title>
</head>
<body>

复制代码

在前后端不分离的时代，在项目开发阶段，前端职员负责编写HTML页，后端职员负责写接口，前端职员调试页面动态数据都需要后端职员的共同，不能单独调试，耗时耗力。前端把前后端代码存放于同一个代码库中，乃至是同一工程目次下。页面中还混淆着后端代码。前后端工程师举行开发时，都必须把整个项目导入到开发工具中。

3.2 前后端分离

随着时代的发展，渐渐的许多大中小公司开始把前后端的边界分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。

前后端分离情形一

前端资源和后台接口位于同一个服务器

前后端分离情形二

前台资源和后台接口分别位于不同的服务器(跨域)

3.3 跨域和同源计谋

例如【前后端分离情形二】欣赏器不允许一个服务器中的页面向另一个服务器发送请求，错误信息如下：

我们通常称这种范例的请求叫跨域请求。
为什么会跨域呢?

因为违背了同源计谋的请求就形成了跨域。

那什么是同源计谋呢?
是指协议，域名，端标语雷同就称为同源,同源的请求是允许的,如果非同源，那么在请求数据时，欣赏器会在控制台中报一个异常，提示拒绝访问,就造成了跨域。
那怎么样办理这个问题呢？
为使受信托的网站之间可以大概跨域访问，HTML5提供了一个新的计谋，就是Access-Control-Allow-Origin相应头。目标服务器通过该相应头可以指定允许来自特定URL的跨域请求，其值可以设置为恣意URL或特定URL等。
实现方式有:
1、通过设置后台服务器允许跨域请求
2、JSONP
3、使用署理服务器
4、前台使用署理
3.4 JSONP实现跨域请求

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。我们可以通过使用 html的script标志来举行跨域请求，并在相应中返回要实行的script代码，此中可以直接使用JSON通报javascript对象。这种跨域的通讯方式称为JSONP。

JSONP：遵循欣赏器的同源计谋基础上实现跨域请求的一种方式。原理：与XMLHttpRequest无关，是使用<script>标签的src属性实现了跨域请求。问题：在欣赏器中，哪些标签可以加载跨域资源？答案：<script>、<img>、<iframe>、<link>等标签。
JSONP之所以接纳<script>标签，是因为该标签加载的资源可以直接当做JavaScript代码实行，只要通过服务器端的共同，就可以传送数据。

注意：
JSONP本质上是加载了其他网站的脚本，这种方式存在安全风险，因为其他网站可以使用JavaScript盗取用户信息，或更改页面内容。因此，在加载脚本前，一定确保对方是受信托的网站。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)