AJAX
Asynchronous Javascript And Xml:异步(随机,互不影响)的 JavaScript 和 Xml
- 使用ajax请求能够实现页面的局部刷新效果
- ajax是前端的技术,它能够在局部地刷新页面,实现前后端数据的传输而视图不发生改变(在springmvc中有用到)
本套课程是继 老杜 servlet + jsp 之后的课程,所以下述笔记全是web项目。由于没有提及maven,所以需要手动添加web框架支持(Add frameworks support:Web);手动导入创建web项目的jar包(tomcat安装目录下的servlet,jsp),具体的流程可以查看servlet-jsp笔记【学习ajax必须具备JS的基础】
传统请求及缺点
代码路径:old-request
-
传统的请求都有哪些?
- 直接在浏览器地址栏上输入URL。(学servlet时采用的)
- 点击超链接
- 提交form表单
- 使用JS代码发送请求
- window.open(url)
- document.location.href = url
- window.location.href = url
-
传统请求存在的问题
-
页面全部刷新导致了用户的体验较差。【通过F12调控制台运行代码可以观察得到:整个页面进行了刷新】
- 举个例子:假如你在看视频,浏览器已经缓存了该视频,此时又有一个登录选项,如果按照传统的请求方式,当点击登录时(发送传统请求),会导致该页面全部刷新并且加载展示新的登录页面。由于页面全部刷新,之前缓存好的视频也被清空了
- 而采用ajax的方式,能够做到刷新部分页面。
- 通过XMLHttpRequest对象发送ajax请求(ajax请求其实也是要通过js代码实现的)
- 每个ajax请求互不冲突,类似于不同的线程
-
传统的请求导致用户的体验有空白期。(用户的体验是不连贯的)
-
AJAX概述
- AJAX不能称为一种技术,它是多种技术的综合产物。
- AJAX可以让浏览器发送一种特殊的请求,这种请求可以是:异步的。
- 什么是异步,什么是同步?
- 假设有t1和t2线程,t1和t2线程并发,就是异步。
- 假设有t1和t2线程,t2在执行的时候,必须等待t1线程执行到某个位置之后t2才能执行,那么t2在等t1,显然他们是排队的,排队的就是同步。
- AJAX是可以发送异步请求的。也就是说,在同一个浏览器页面当中,可以发送多个ajax请求,这些ajax请求之间不需要等待,是并发的,异步的。
- AJAX代码属于WEB前端的JS代码。和后端的java没有关系,后端也可以是php语言,也可以是C语言。
- AJAX 应用程序可能使用 XML 来传输数据,但将数据作为纯文本或 JSON 文本传输也同样常见。
- AJAX可以更新网页的部分,而不需要重新加载整个页面。(页面局部刷新)
- AJAX可以做到在同一个网页中同时启动多个请求,类似于在同一个网页中启动“多线程”,一个“线程”一个“请求”。
- ajax请求:
- ajax请求是异步,并发的:
- 同步线程的执行有先后,而异步线程的执行顺序是随机的
- ajax请求的执行是异步的,谁也不干扰谁
- ajax请求可以进行页面的局部刷新
- 同步线程的执行有先后,而异步线程的执行顺序是随机的
XMLHttpRequest对象
-
XMLHttpRequest对象是AJAX的核心对象,发送请求以及接收服务器数据的返回,全靠它了。
-
XMLHttpRequest对象,**现代浏览器都是支持的,都内置了该对象。**直接用即可。
-
创建XMLHttpRequest对象
-
var xhr = new XMLHttpRequest();
-
-
XMLHttpRequest对象的方法
方法 | 描述 |
---|---|
abort() | 取消当前请求 |
getAllResponseHeaders() | 返回头部信息 |
getResponseHeader() | 返回特定的头部信息 |
open(method, url, async, user, psw) | 规定请求method:请求类型 GET 或 POST;url:文件位置; async:true(异步)或 false(同步);user:可选的用户名称;psw:可选的密码 |
send() | 将请求发送到服务器,用于 GET 请求 |
send(string) | 将请求发送到服务器,用于 POST 请求 |
setRequestHeader() | 向要发送的报头添加标签/值对 |
- XMLHttpRequest对象的属性
属性 | 描述 |
---|---|
onreadystatechange | 定义当 readyState 属性发生变化时被调用的函数 |
readyState | 保存 XMLHttpRequest对象 的状态。0:请求未初始化 1:服务器连接已建立 2:请求已收到 3:正在处理请求 4:请求已完成且响应已就绪 |
responseText | 以字符串返回响应数据 |
responseXML | 以 XML 数据返回响应数据 |
status | 返回请求的状态码。200: “OK”,403: “Forbidden”,404: “Not Found” |
statusText | 返回状态文本(比如 “OK” 或 “Not Found”) |
XMLHttpRequest的readyState属性
AJAX GET请求
代码路径:ajax:ajax1.jsp、AjaxRequest1Servlet
测试:http://localhost:8080/ajax/ajax1.jsp
-
发送AJAX get请求,前端代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax get请求</title> </head> <body> <script type="text/javascript"> window.onload = function(){ document.getElementById("helloBtn").onclick = function (){ // 发送ajax get请求 //console.log("发送ajax get请求") // 1.第一步:创建AJAX核心对象XMLHttpRequest var xhr = new XMLHttpRequest(); // 2.第二步:注册回调函数 // 这是一个回调函数,这个函数在XMLHttpRequest对象的readyState状态值发生改变的时候被调用。 xhr.onreadystatechange = function (){ // 这里的回调函数会被调用多次。readyState的值发生变化该函数就会被调用 //console.log(xhr.readyState) // 当XMLHttpRequest对象的readyState的状态是4的时候,表示响应结束了。 if (this.readyState == 4) { // 响应结束了。 //console.log("响应结束了") // 响应结束之后,一般会有一个HTTP的状态码。 //HTTP状态码常见的包括:200表示成功了,404表示资源找不到,500表示服务器内部 错误。HTTP状态码是HTTP协议的一部分,HTTP协议中规定的。服务器响应之后都会有一个状态码。 // 获取HTTP状态码 //console.log("HTTP响应状态码:" + this.status) if (this.status == 404) { alert("对不起,您访问的资源不存在,请检查请求路径") } else if(this.status == 500){ alert("对不起,服务器发生了严重的内部错误,请联系管理员") } else if(this.status == 200){ //alert("响应成功,完美") // 200表示完全响应完毕,成功结束了。 // 通过XMLHttpRequest对象获取响应的信息。 // 通过XMLHttpRequest对象的responseText属性来获取响应的信息。 //alert(this.responseText) // 把响应信息放到div图层当中,渲染 // this.responseText 存放的是 后端 out对象输出的内容 document.getElementById("mydiv").innerHTML = this.responseText } } } // 3.第三步:开启通道(open只是浏览器和服务器建立连接,通道打开,并不会发送请求) // XMLHttpRequest对象的open方法 // open(method, url, async, user, psw) // method: 请求的方式,可以是GET,也可以是POST,也可以是其它请求方式。 // url:请求的路径(带项目名) // async: 只能是true或者false,true表示此ajax请求是一个异步请求,false表示此ajax请求是一个同步请求。(大部分请求都是true,要求异步。极少数情况需要同步,以后再说。) // user:用户名 pwd: 密码,用户名和密码是进行身份认证的,说明要想访问这个服务器上的资源,可能需要提供一些口令才能访问。需不需要用户名和密码,主要看服务器的态度。 xhr.open("GET", "/ajax/ajaxrequest1", true) // /ajax是项目名 // 4.第四步:发送ajax请求 xhr.send() } } </script> <!--给一个按钮,用户点击这个按钮的时候发送ajax请求--> <input type="button" value="hello ajax" id="helloBtn"> <!--给一个div图层,ajax接收了响应的数据之后,在div中进行渲染。--> <div id="mydiv"></div> </body> </html>
-
发送AJAX get请求,后端代码:
package com.bjpowernode.ajax.servlet; @WebServlet("/ajaxrequest1") // 老杜servlet-jsp有讲 public class AjaxRequest1Servlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { /* String s = null; s.toString(); // 500错误 */ // Servlet向浏览器响应一段数据 PrintWriter out = response.getWriter(); // out对象向浏览器输出信息 // 服务器的代码实际上和以前的代码还是完全一样的。 // 只不过这个out在响应的时候,浏览器客户端的XMLHttpRequest对象会接收到这个响应的信息。 out.print("<font color='red'>welcome to study ajax!!!!</font>"); } }
-
AJAX get请求如何提交数据呢?
- get请求提交数据是在“请求行”上提交,格式是:url?name=value&name=value&name=value…
- 在 xhr.open()函数中的形参 url 中提交数据
- 代码见 下一节
- 其实这个get请求提交数据的格式是HTTP协议中规定的,遵循协议即可。
- get请求提交数据是在“请求行”上提交,格式是:url?name=value&name=value&name=value…
AJAX GET请求的缓存问题
- 对于低版本的IE浏览器来说,AJAX的get请求可能会走缓存,存在缓存问题。对于现代的浏览器来说,大部分浏览器都已经不存在AJAX get缓存问题了。
- 什么是AJAX GET请求缓存问题呢?
- 在HTTP协议中是这样规定get请求的:get请求会被缓存起来。
- 发送AJAX GET请求时,在同一个浏览器上,前后发送的AJAX请求路径一样的话,对于低版本的IE来说,第二次的AJAX GET请求会走缓存,不走服务器。
- POST请求在HTTP协议中规定的是:POST请求不会被浏览器缓存。
- GET请求被缓存的优缺点:
- 优点:直接从浏览器缓存中获取资源,不需要从服务器上重新加载资源,速度较快,用户体验好。
- 缺点:无法实时获取最新的服务器资源。
- 浏览器什么时候会走缓存?
- 第一:是一个GET请求
- 第二:请求路径已经被浏览器缓存过了。第二次发送请求的时候,这个路径没有变化,会走浏览器缓存。
- 如果是低版本的IE浏览器,怎么解决AJAX GET请求的缓存问题呢?
- **可以在请求路径url后面添加一个时间戳,这个时间戳是随时变化的。**所以每一次发送的请求路径都是不一样的,这样就不会走浏览器的缓存问题了。
- 可以采用时间戳:“url?t=” + new Date().getTime()
- 或者可以通过随机数:“url?t=” + Math.random()
- 也可以随机数+时间戳…
- **可以在请求路径url后面添加一个时间戳,这个时间戳是随时变化的。**所以每一次发送的请求路径都是不一样的,这样就不会走浏览器的缓存问题了。
代码路径:ajax:ajax2.jsp、AjaxRequest2Servlet;ajax3.jsp
测试:http://localhost:8080/ajax/ajax2.jsp
-
发送AJAX get请求,前端代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>发送ajax get请求</title> </head> <body> <script type="text/javascript"> window.onload = function () { document.getElementById("btn").onclick = function () { //1. 创建AJAX核心对象 var xhr = new XMLHttpRequest(); //2. 注册回调函数 xhr.onreadystatechange = function(){ if (this.readyState == 4) { // XMLHttpRequest对象的状态 if (this.status == 200) { // http状态码 // 通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容。并且不管服务器响应回来的是什么,都以普通文本的形式获取。(服务器可能响应回来:普通文本、XML、JSON、HTML...) // innerHTML属性是javascript中的语法,和ajax的XMLHttpRequest对象无关。innerHTML可以设置元素内部的HTML代码。(innerHTML可以将后面的内容当做一段HTML代码解释并执行) //document.getElementById("myspan").innerHTML = this.responseText document.getElementById("mydiv").innerHTML = this.responseText // innerText也不是AJAX中的,是javascript中的元素属性,和XMLHttpRequest无关。innerText也是设置元素中的内容,但是即使后面是一段HTML代码,也是将其看做一个普通字符串设置进去。 //document.getElementById("myspan").innerText = this.responseText }else{ alert(this.status) } } } //3. 开启通道 // 获取到用户填写的usercode和username var usercode = document.getElementById("usercode").value var username = document.getElementById("username").value // 搞一个时间戳 //alert(new Date().getTime()) // get请求 通过请求行传递参数 //xhr.open("GET", "/ajax/ajaxrequest2?t="+new Date().getTime()+"&usercode="+usercode+"&username="+username, true) xhr.open("GET", "/ajax/ajaxrequest2?t="+Math.random()+"&usercode="+usercode+"&username="+username, true) //4. 发送ajax请求 xhr.send() } } </script> usercode<input type="text" id="usercode"><br> username<input type="text" id="username"><br> <button id="btn">发送ajax get请求</button> <span id="myspan"></span> <div id="mydiv"></div> </body> </html>
-
发送AJAX get请求,后端代码:
package com.bjpowernode.ajax.servlet; @WebServlet("/ajaxrequest2") public class AjaxRequest2Servlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置响应的内容类型以及字符集 response.setContentType("text/html;charset=UTF-8"); // 获取响应流 PrintWriter out = response.getWriter(); // 响应 //out.print("<font color='red'>用户名已存在!!!</font>"); // 获取ajax get请求提交的数据(获取前端请求行传递的参数) String usercode = request.getParameter("usercode"); String username = request.getParameter("username"); // 这里输出的语句被 XMLHttpRequest对象的 responseText属性获取 out.print("usercode=" + usercode + ", username=" + username); } }
AJAX POST请求
-
AJAX POST请求和GET请求的代码区别在哪里?就是前端代码有区别。后端代码没有区别。
代码路径:ajax:ajax4.jsp、AjaxRequest3Servlet
测试:http://localhost:8080/ajax/ajax4.jsp
// 4. 发送AJAX POST请求 xhr.open("POST", "/项目名/请求路径", true) // 设置请求头的内容类型。模拟form表单提交数据。【这里只是模拟,真正的提交数据要 用标签的name属性】 // "application/x-www-form-urlencoded"是通过写form表单的enctype属性得到的 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 获取表单中的数据 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // send函数中的参数就是发送的数据,这个数据在“请求体”当中发送。(而上述get请求发送的数据需要拼接在open()函数的url参数中,类似于在“请求行”当中发送) xhr.send("username="+username+"&password="+password) // 这里的 格式一定要正确 name=value&name=value
-
实现一个案例:使用AJAX POST请求实现用户注册的时候,用户名是否可用。(验证用户名是否可以注册)实现步骤如下:
代码路径:ajax:ajax5.jsp、AjaxRequest4Servlet
测试:http://localhost:8080/ajax/ajax5.jsp
-
在前端,用户输入用户名之后,失去焦点事件blur发生,然后发送AJAX POST请求,提交用户名
-
在后端,接收到用户名,连接数据库,根据用户名去表中搜索
-
t_user表: id name 1 zhangsan 连接数据库需要在 WEB-INF下新建 lib目录,将mysql驱动相关的jar包放在lib目录下
-
-
如果用户名已存在
- 后端响应消息:对不起,用户名已存在(在前端页面以红色字体展示)
-
如果用户名不存在
- 后端响应消息:用户名可以使用(在前端页面以绿色字体展示)
-
实现一个案例:用户点击按钮之后,发送AJAX请求,显示学生列表。
代码路径:ajax:ajax6.html、AjaxRequest5Servlet
测试:http://localhost:8080/ajax/ajax6.jsp
// 向前端发送数据(连接数据库要用循环) StringBuilder html = new StringBuilder(); // 实现了Serializable接口,能够进行网络传输 html.append("<tr>"); html.append("<td>1</td>"); html.append("<td>张三</td>"); html.append("<td>20</td>"); html.append("<td>北京大兴区</td>"); html.append("</tr>"); html.append("<tr>"); html.append("<td>2</td>"); html.append("<td>李四</td>"); html.append("<td>22</td>"); html.append("<td>北京海淀区</td>"); html.append("</tr>"); out.print(html); // PrintWriter out = response.getWriter(); //前端接收数据 document.getElementById("stutbody").innerHTML = this.responseText <tbody id="stutbody"></tbody>
- 在后端java程序中(Servlet程序中)拼接HTML代码,然后将HTML代码直接响应到浏览器客户端。这种方式不好,不应该在java代码(Servlet程序)中编写HTML代码,能否在java程序中直接向前端响应数据,而不编写前端代码?
- 可以**,可以在后端拼接JSON格式的字符串,或者XML格式的字符串,将这个字符串发送给前端,前端解析即可。**【该案例 用于 引出下面两节内容】
-
基于JSON的数据交换
代码路径: ajax:jsontest.jsp 回顾json对象的创建
ajax:jsontest2.jsp 将json格式字符串转为json对象
ajax:ajax6jsp、AjaxRequest5Servlet,bean/Student 对上节代码的部分优化(3次优化)
第一次优化:后端拼接json格式的字符串(写死了),前端将其转换成json对象并进行拼接
第二次优化:后端连接数据库,获取数据并拼接json字符串,
第三次优化:使用fastjson工具,后端进行拼接 【fastjson fastjson的使用 】
测试:http://localhost:8080/ajax/ajax6.jsp
-
在WEB前端中,如何将一个json格式的字符串转换成json对象
// 从服务器端返回来的不是一个json对象,是一个json格式的字符串 var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}" // \ 是转义符 // window.eval("var jsonObj = " + jsonStr) // 将json格式字符串 转为 json对象(1. eval()函数,见前端基础笔记;2. 使用js内置对象JSON) var jsonObj = JSON.parse(jsonStr) // JSON.parse(this.responseText) // 访问json对象的属性 console.log(jsonObj.username) console.log(jsonObj.password)
-
第一次优化
//后端(json在线校验工具可以查看json格式是否错误) String jsonStr = "[{"name":"张三","age":"18","addr":"北京大兴区"}, {"name":"李四","age":"20","addr":"北京海淀区"}]"; out.print(jsonStr);
<!-- 前端 --> var stuList = JSON.parse(this.responseText); // json对象数组 var html = "" for (var i = 0; i < stuList.length; i++) { var stu = stuList[i]; html += "<tr>" html += "<td>"+(i + 1)+"</td>" html += "<td>"+ stu.name +"</td>" html += "<td>"+ stu.age +"</td>" html += "<td>"+ stu.addr +"</td>" html += "</tr>" } document.getElementById("stutbody").innerHTML = html
-
在后端拼接JSON格式的字符串,响应给前端的浏览器(第二次优化)
需要用到的表 t_student表: id(主键,自增) name age addr 1 张三 20 北京大学 2 李四 22 清华大学 3 王五 21 青海大学
StringBuilder json = new StringBuilder(); String jsonStr = ""; json.append("["); while (rs.next()) { // 获取每个学生的信息 String name = rs.getString("name"); String age = rs.getString("age"); String addr = rs.getString("addr"); // 拼接json格式的字符串 // {"name":" 王五 ","age": 20 ,"addr":" 北京大兴区 "}, json.append("{\"name\":\""); json.append(name); json.append("\",\"age\":"); json.append(age); json.append(",\"addr\":\""); json.append(addr); json.append("\"},"); } // 去除最后的 "," jsonStr = json.substring(0, json.length() - 1) + "]"; // 前端同第一次优化代码相同
-
拼接JSON格式的字符串太痛苦,可以使用阿里巴巴的fastjson组件,它可以将java对象转换成json格式的字符串(第三次优化)
//1. 新建 Student类 List<Student> studentList = new ArrayList<>(); while (rs.next()) { // 取出数据 String name = rs.getString("name"); int age = rs.getInt("age"); String addr = rs.getString("addr"); // 将以上数据封装成Student对象 Student s = new Student(name, age, addr); // 将Student对象放到List集合 studentList.add(s); } // 将List集合转换成json字符串 jsonStr = JSON.toJSONString(studentList); // 前端同第一次优化代码相同
注意:使用fastjson需要创建实体类,引入fastjson-1.2.2.jar【fastjson-1.2.2.jar:jar包放到WEB-INF/lib目录下】
-
jackson依赖:返回 json 格式的对象,自动将java对象或集合转为json对象【在springmvc中会使用到】。
它比fastjson要慢
基于XML的数据交换
-
注意:如果服务器端响应XML的话,响应的内容类型需要写成:
// serlvlet response.setContentType("text/xml;charset=UTF-8");
-
xml和JSON都是常用的数据交换格式
- XML体积大,解析麻烦。较少用。
- JSON体积小,解析简单,较常用。
-
基于XML的数据交换,前端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用XML完成数据交换</title> </head> <body> <script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ // 1.创建XMLHTTPRequest对象 var xhr = new XMLHttpRequest(); // 2.注册回调函数 xhr.onreadystatechange = function () { if (this.readyState == 4) { if (this.status == 200) { // 服务器端响应了一个XML字符串,这里怎么接收呢? // 使用XMLHTTPRequest对象的responseXML属性。接收返回之后,可以自动封装成document对象(文档对象) var xmlDoc = this.responseXML //console.log(xmlDoc) // 获取所有的<student>元素,返回了多个对象,应该是数组。 var students = xmlDoc.getElementsByTagName("student") //console.log(students[0].nodeName) var html = ""; for (var i = 0; i < students.length; i++) { var student = students[i] // 获取<student>元素下的所有子元素 html += "<tr>" html += "<td>"+(i+1)+"</td>" // nameOrAge 即 <student>元素下的所有子元素 var nameOrAge = student.childNodes for (var j = 0; j < nameOrAge.length; j++) { var node = nameOrAge[j] if (node.nodeName == "name") { //console.log("name = " + node.textContent) html += "<td>"+node.textContent+"</td>" } if (node.nodeName == "age") { //console.log("age = " + node.textContent) html += "<td>"+node.textContent+"</td>" } } html += "</tr>" } document.getElementById("stutbody").innerHTML = html }else{ alert(this.status) } } } // 3.开启通道 xhr.open("GET", "/ajax/ajaxrequest6?t=" + new Date().getTime(), true) // 4.发送请求 xhr.send() } } </script> <button id="btn">显示学生列表</button> <table width="500px" border="1px"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody id="stutbody"> <!--<tr> <td>1</td> <td>zhangsan</td> <td>20</td> </tr> <tr> <td>2</td> <td>lisi</td> <td>22</td> </tr>--> </tbody> </table> </body> </html>
-
基于XML的数据交换,后端java程序:
package com.bjpowernode.ajax.servlet; // 服务器端返回XML字符串 @WebServlet("/ajaxrequest6") public class AjaxRequest6Servlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 注意:响应的内容类型是XML。 response.setContentType("text/xml;charset=UTF-8"); PrintWriter out = response.getWriter(); /* <students> <student> <name>zhangsan</name> <age>20</age> </student> <student> <name>lisi</name> <age>22</age> </student> </students> */ StringBuilder xml = new StringBuilder(); xml.append("<students>"); xml.append("<student>"); xml.append("<name>zhangsan</name>"); xml.append("<age>20</age>"); xml.append("</student>"); xml.append("<student>"); xml.append("<name>lisi</name>"); xml.append("<age>22</age>"); xml.append("</student>"); xml.append("</students>"); out.print(xml); } }
AJAX乱码问题
代码路径: ajax:ajax8.jsp、AjaxRequest7Servlet 测试tomcat10
ajax-encoding 测试tomcat9
-
测试内容:
- 发送ajax get请求
- 发送数据到服务器,服务器获取的数据是否乱码?
- 服务器响应给前端的中文,会不会乱码?
- 发送ajax post请求
- 发送数据到服务器,服务器获取的数据是否乱码?
- 服务器响应给前端的中文,会不会乱码?
- 发送ajax get请求
-
包括还要测试tomcat服务器的版本:
- tomcat10和tomcat9都要进行测试。
-
测试结果:
-
对于tomcat10来说,关于字符集,我们程序员不需要干涉,不会出现乱码。
-
对于tomcat9来说呢?
-
响应中文的时候,会出现乱码,怎么解决?
// Servlet response.setContentType("text/html;charset=UTF-8");
-
发送ajax post请求的时候,发送给服务器的数据,服务器接收之后乱码,怎么解决?
// Servlet request.setCharacterEncoding("UTF-8");
-
-
AJAX的异步与同步
代码路径: ajax:ajax9.jsp、AjaxRequest8Servlet、AjaxRequest9Servlet
-
什么是异步?什么是同步?
- ajax请求1和ajax请求2,同时并发,谁也不用等谁,这就是异步。(a不等b,b也不等a)
- 如果ajax请求1在发送的时候需要等待ajax请求2结束之后才能发送,那么这就是同步。(a等待b,或者b等待a,只要发生等待,就是同步。)
-
异步和同步在代码上如何实现?
// 假设这个是ajax请求1 // 如果第三个参数是false:这个就表示“ajax请求1”不支持异步,也就是说ajax请求1发送之后,会影响其他ajax请求的发送,只有当我这个请求结束之后,你们其他的ajax请求才能发送。 // false表示,不支持异步。我这个请求发了之后,你们其他的请求都要靠边站。都等着。你们别动呢,等我结束了你们再说。 xhr1.open("请求方式", "URL", false) xhr1.send() // 假设这个是ajax请求2 // 如果第三个参数是true:这个就表示“ajax请求2”支持异步请求,也就是说ajax请求2发送之后,不影响其他ajax请求的发送。 xhr2.open("请求方式", "URL", true) xhr2.send()
-
什么情况下用同步?(大部分情况下我们都是使用ajax异步方式,同步很少用。)
- 举一个例子
- 用户注册
- 用户名需要发送ajax请求进行校验
- 邮箱地址也需要发送ajax请求校验
- 其他的也可能需要发送ajax请求。。。
- 并且最终注册按钮的时候,也是发送ajax请求进行注册。
- 那么显然,注册的Ajax请求和校验的ajax请求不能异步,必须等待所有的校验的ajax请求结束之后,注册的ajax请求才能发。
- 用户注册
- 举一个例子
AJAX代码封装(JQuery的原理)
-
AJAX请求相关的代码都是类似的,有很多重复的代码,这些重复的代码能不能不写,能不能封装一个工具类。要发送ajax请求的话,就直接调用这个工具类中的相关函数即可。
-
接下来,手动封装一个工具类,这个工具类我们可以把它看做是一个JS的库。我们把这个JS库起一个名字,叫做jQuery。(我这里封装的jQuery只是一个前端的库,和后端的java没有关系,只是为了方便web前端代码的编写,提高WEB前端的开发效率)
-
手动开发jQuery,源代码【jQuery源码分析】
代码路径: ajax:ajax10.jsp 封装ajax代码的流程(未封装ajax请求)
ajax:js-review 复习 JavaScript 中类的创建
ajax:jQueryTest.jsp 将封装好的代码放到单独的js文件,测试封装好的代码(未封装ajax请 求)
<!-- 以下代码可以单独放在一个js文件中:web/js/jQuery-1.0.0.js,jQuery-1.0.0.js为文件名 --> function jQuery(selector){ // selector可能是#id,也可以能是其他的选择器。例如类选择器:.class /* 要封装的代码是:根据id来获取元素。document.getElementById("btn") 由于 $ = JQuery。故 $("#btn") 等价于 document.getElementById("btn")。这就对 ajax代码进行了一层封装 */ /*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */ if (typeof selector == "string") { if (selector.charAt(0) == "#") { // selector是一个id选择器 // 从下标为1(设计为全局变量是因为要封装该对象的属性,让其作为方法调用) // domObj 为 dom对象 domObj = document.getElementById(selector.substring(1)) // 升级成全局变量 return new jQuery() // 返回的jQuery对象,为其扩展方法。其实是封装属性,简化代码 } } // 页面加载完毕之后,注册回调函数。 if (typeof selector == "function") { window.onload = selector } // 定义一个html()函数,代替:domObj.innerHTML = "" this.html = function(htmlStr){ domObj.innerHTML = htmlStr } // 定义一个click()函数,代替:domObj.onclick = function(){} // 这里的fun可以是任意数据类型(js语言的特性) this.click = function(fun){ domObj.onclick = fun } this.focus = function (fun){ domObj.onfocus = fun } this.blur = function(fun) { domObj.onblur = fun } this.change = function (fun){ domObj.onchange = fun } // 定义一个 val()函数,代替:domObj.value this.val = function(v){ // 没有传参,默认赋值 undefined。表明此处做的操作是 获取 domObj对象的 value属性的值 if (v == undefined) { return domObj.value }else{ domObj.value = v // 传入参数,表明此处做的操作是修改domObj对象的 value属性的值 } } // 静态的方法,发送ajax请求(静态方法:类名.) /** * 分析:使用ajax函数发送ajax请求的时候,需要程序员给我们传过来什么? * 请求的方式(type):GET/POST * 请求的URL(url):url * 请求时提交的数据(data):data * 请求时发送异步请求还是同步请求(async):true表示异步,false表示同步。 * 这些信息都被封装到 json对象中 */ jQuery.ajax = function(jsonArgs){ // 这里的 形参jsonArgs是一个json对象。是前端发送ajax请求的数据 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState == 4) { if (this.status == 200) { // 我们这个工具类在封装的时候,先不考虑那么多,假设服务器返回的都是json格式的字符串。 var jsonObj = JSON.parse(this.responseText) // json对象。是后端提交的数据 // 调用函数:将json对象(后端传的数据)传到success() jsonArgs.success(jsonObj) } } } if (jsonArgs.type.toUpperCase() == "POST") { xhr.open("POST", jsonArgs.url, jsonArgs.async) xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") xhr.send(jsonArgs.data) } if (jsonArgs.type.toUpperCase() == "GET") { xhr.open("GET", jsonArgs.url + "?" + jsonArgs.data, jsonArgs.async) xhr.send() } } } $ = jQuery // 这里有个细节,执行这个目的是为了让静态方法ajax生效。 // js中的 静态方法 和java中的有点不一样。js中必须要先new一个实例对象,才能够通过类名调用静态方法。这里的对象就是上述目的 new jQuery()
-
使用以上库,怎么用?
- 使用jQuery库的第一件事,是把js库引进来
代码路径:ajax:ajax11.jsp、AjaxRequest10Servlet 封装ajax get/post请求
ajax:ajax12.jsp AjaxRequest11Servlet 测试封装的ajx get/post请求
<!-- 使用jQuery库的第一件事,是把js库引进来:/ajax是项目名 --> <script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script> <script type="text/javascript"> // $(function(){}):表示页面加载完成后,执行该匿名回调函数(对 window.onload的一层封装) $(function(){ // 绑定 鼠标单击事件 // $("#btn1") 是 JQuery对象,没有方法,需要自行扩充。如这里的click函数就是自行扩充的,对应的是鼠标单击事件的封装 $("#btn1").click(function(){ $.ajax({ // 调用封装好的函数 jQuery 中 定义好的 ajax函数,形参是json对象(前端) type : "POST", // 请求方式 url : "/ajax/ajaxrequest11", // 请求路径 data : "username=" + $("#username").val(), // 前端提交给后端的数据 async : true, // 异步 // 程序响应回来之后,对于前端页面来说,要拿到响应的数据,并进行解析,展示 // success 是 该json字符串对象的一个属性,和type一样。 形参json是后端返回的数据,是json字符串(此时已经被转成json对象了),存放的是后端响应的数据 success : function(json){ // 后端响应成功后,前端处理数据 的匿名函数 $("#div1").html(json.uname) } }) }) }) </script> <input type="button" id="btn1" value="发送ajax get请求"> username:<input type="text" id="username"> <div id="div"></div>
// 后端代码 @WebServlet("/ajaxrequest11") public class AjaxRequest12Servlet extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); // 获取ajax请求提交的数据 response.setContentType("text/html; charset=UTF-8"); PrintWriter out = response.getWriter(); // {"uname": "username"} out.print("{\"uname\": \""+username+"\"}"); // 将该数据以json字符串的形式提交给前端 } }
AJAX实现省市联动
-
什么是省市联动?
- 在网页上,选择对应的省份之后,动态的关联出该省份对应的市(用ajax请求)。选择对应的市之后,动态的关联出该市对应的区。(首先要清楚需求)
-
进行数据库表的设计
-
t_area (区域表) id(PK-自增) code name pcode --------------------------------------------- 1 001 河北省 null 2 002 河南省 null 3 003 石家庄 001 4 004 邯郸 001 5 005 郑州 002 6 006 洛阳 002 7 007 丛台区 004 将全国所有的省、市、区、县等信息都存储到一张表当中。采用的存储方式实际上是code pcode形式。
-
-
建表t_area,模拟好数据。
-
首先实现第一个功能:
-
页面加载完毕之后,先把省份全部展现出来。(使用我们封装好的ajax工具类)
-
前端代码
<!--引入我们自己编写的jQuery库--> <script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script> <script type="text/javascript"> $(function(){ // 发送ajax请求,从数据库中获取所有的省份。省份的pcode是null $.ajax({ type : "get", url : "/ajax/listArea", data : "t=" + new Date().getTime(), // 前端提交给后端的数据 async : true, // jsonArry用来接收后端响应的数据(json字符串),但此处已经是json对象了(原因是我们在对success()函数进行封装时做了转换) success : function(jsonArr){ // [{"code":"001", "name":"河北省"},{"code":"002", "name":"河南省"}] // 以上格式的json是我们自己设计出来的,希望服务器能够给我们返回这样一个json格式的字符串。 var htmlStr = "<option value=''>--请选择省份--</option>"; for (var i = 0; i < jsonArr.length; i++) { var area = jsonArr[i] htmlStr += "<option value='"+area.code+"'>"+area.name+"</option>" } $("#province").html(htmlStr) } }) // 只要change发生,就发送ajax请求。从数据库获取该省下所有的市 $("#province").change(function(){ // 发送ajax请求 $.ajax({ type : "get", url : "/ajax/listArea", // this.value 指的是 多选框中 选择的选项(每个省)的 value属性的值 data : "t=" + new Date().getTime() + "&pcode=" + this.value, // dataType:"json", 版本不同,旧版需要加上该句才能实现效果 async : true, success : function(jsonArr){ // [{"code":"006", "name":"XXX"},{"code":"008", "name":"YYYY"}] var html = "<option value=''>--请选择市--</option>"; for (var i = 0; i < jsonArr.length; i++) { var area = jsonArr[i] html += "<option value='"+area.code+"'>"+area.name+"</option>" } $("#city").html(html) } }) }) }) </script> <select id="province"> <!--<option value="">--请选择省份--</option> <option value="001">河北省</option> <option value="002">河南省</option>--> </select> <select id="city"></select>
-
后端代码
package com.bjpowernode.ajax.servlet; @WebServlet("/listArea") public class ListAreaServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 接收ajax请求传递的参数(第二次Ajax请求要用) String pcode = request.getParameter("pcode"); // 连接数据库,获取所有的对应区域。最终响应一个JSON格式的字符串给WEB前端。 Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; List<Area> areaList = new ArrayList<>(); try { // 注册驱动 Class.forName("com.mysql.cj.jdbc.Driver"); // 获取连接(改数据库) String url = "jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=UTF-8"; String user = "root"; String password = "root"; conn = DriverManager.getConnection(url, user, password); // 获取预编译数据库操作对象 String sql = ""; if(pcode == null){ sql = "select code,name from t_area where pcode is null"; ps = conn.prepareStatement(sql); }else{ sql = "select code,name from t_area where pcode = ?"; ps = conn.prepareStatement(sql); ps.setString(1, pcode); } // 执行SQL rs = ps.executeQuery(); // 处理结果集 while (rs.next()) { String code = rs.getString("code"); String name = rs.getString("name"); Area a = new Area(code, name); // 使用了fastjson工具 areaList.add(a); } } catch (Exception e) { e.printStackTrace(); } finally { // 释放资源 if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (ps != null) { try { ps.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } response.setContentType("text/html;charset=UTF-8"); // 使用fastjson将java对象转换成json字符串。 String json = JSON.toJSONString(areaList); // 响应JSON。 response.getWriter().print(json); } }
-
AJAX跨域问题
跨域
-
**跨域是指从一个域名的网页去请求另一个域名的资源。**比如从百度(https://baidu.com)页面去请求京东(https://www.jd.com)的资源。
-
通过超链接或者form表单提交或者window.location.href的方式进行跨域是不存在问题的(大家可以编写程序测试一下)。代码路径:a/index.html,b/index.html、b/UserRegServlet
但在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源,由于同源策略的存在导致无法跨域访问,那么ajax就存在这种跨域问题。代码路径:a/ajax1.html,b/HelloServlet
- 跨域的时候,不允许共享同一个 XMLHttpRequest对象。因为共享一个 XMLHttpRequest对象是不安全的
- 故 ajax请求存在跨域问题
-
同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,同源就是协议、域名和端口都相同。
-
同源策略有什么用?如果你刚刚在网银输入账号密码,查看了自己还有1万块钱,紧接着访问一些不规矩的网站,这个网站可以访问刚刚的网银站点,并且获取账号密码,那后果可想而知。所以,从安全的角度来讲,同源策略是有利于保护网站信息的。
-
有一些情况下,我们是需要使用ajax进行跨域访问的。比如某公司的A页面(a.bjpowernode.com)有可能需要获取B页面(b.bjpowernode.com)。
同源还是不同源
-
区分同源和不同源的三要素
-
- 协议
- 域名
- 端口
-
协议一致,域名一致,端口号一致,三个要素都一致,才是同源,其它一律都是不同源
URL1 | URL2 | 是否同源 | 描述 |
---|---|---|---|
http://localhost:8080/a/index.html | http://localhost:8080/a/first | 同源 | 协议 域名 端口一致 |
http://localhost:8080/a/index.html | http://localhost:8080/b/first | 同源 | 协议 域名 端口一致 |
http://www.myweb.com:8080/a.js | https://www.myweb.com:8080/b.js | 不同源 | 协议不同 |
http://www.myweb.com:8080/a.js | http://www.myweb.com:8081/b.js | 不同源 | 端口不同 |
http://www.myweb.com/a.js | http://www.myweb2.com/b.js | 不同源 | 域名不同 |
http://www.myweb.com/a.js | http://crm.myweb.com/b.js | 不同源 | 子域名不同 |
AJAX跨域解决方案
方案1:设置响应头
-
核心原理:跨域访问的资源允许你跨域访问。
- a访问b的资源,b允许a访问。b的servlet中设置响应头,允许ajax跨域请求 代码路径:a/ajax1.html,b/HelloServlet
-
实现:
-
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080"); // 允许某个 response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有
-
方案2:jsonp
页面加载执行js代码:代码路径:a/ajax2.html,b/JSONPServlet1
点击按钮加载js代码:a/ajax3.html,b/JSONPServlet2
-
jsonp:json with padding(带填充的json【学完之后再理解这个什么意思!!!】)
-
<!-- 利用<script>标签的src属性进行跨域请求 --> <!--script标签是可以跨域的。src属性可以是xxx.js文件,那这个路径可以是一个servlet路径吗? 可以。跨域访问b主机上的请求路径为 /jsonp1的servlet。?后面是传递的数据(函数名),所以 jsonp只支持get请求。页面加载时,执行sum函数 --> <script type="text/javascript" src="http://localhost:8081/b/jsonp1?fun=sum"></script>
-
-
jsonp不是一个真正的ajax请求(没有new XMLHttpRequest对象)。只不过可以完成ajax的局部刷新效果。可以说jsonp是一种类ajax请求的机制。
-
jsonp不是ajax请求,但是可以完成局部刷新的效果,并且可以解决跨域问题。
-
注意:jsonp解决跨域的时候,只支持GET请求。不支持post请求。
方案3:jQuery封装的jsonp
-
牛人们写的jQuery库,已经对jsonp进行了封装。大家可以直接拿来用。
-
用之前需要引入jQuery库的js文件。(这里的jQuery库咱们就不再封装了,咱们直接用jQuery写好的jsonp方式。)jar路径
-
jQuery中的jsonp其实就是我们方案2的高度封装,底层原理完全相同。
-
核心代码
-
function sayHello(){ } // 发送ajax请求,其实本质并不是一个ajax请求 $.ajax({ type : "GET", // jsonp只支持get请求 url : "跨域的url", dataType : "jsonp", // 指定数据类型 jsonp : "fun", // 指定参数名(不设置的时候,默认是:"callback") jsonpCallback : "sayHello" // 指定回调函数的名字(不设置的时候,jQuery会自动生成一个随 机的回调函数。url: /b/jsonp3?callback=随机的函数名 // ==》url: /b/jsonp3?fun=sayHello //并且这个随机的回调函数还会自动调用success的回调函数。) })
-
方案4:代理机制(httpclient)
- 前端请求后端,后端直接跨域访问数据
- 使用Java程序怎么去发送get/post请求呢?【GET和POST请求就是HTTP请求。】
- 第一种方案:使用JDK内置的API(java.net.URL…),这些API是可以发送HTTP请求的。
- 第二种方案:使用第三方的开源组件,比如:apache的httpclient组件。(httpclient组件是开源免费的,可以直接用)jar
- 在java程序中,使用httpclient组件可以发送http请求。
- 对于httpclient组件的代码,大家目前可以不进行深入的研究,可以从网上直接搜。然后粘贴过来,改一改,看看能不能完成发送get和post请求。(老杜提示:cv来的代码最好 新建模块进行测试,确保其正确性,不要直接修改项目源码)
- 使用httpclient组件,需要先将这个组件相关的jar包引入到项目当中。
方案5:nginx反向代理
- nginx反向代理中也是使用了这种代理机制来完成AJAX的跨域,实现起来非常简单,只要修改一个nginx的配置即可。以后大家学习nginx之后再说吧。!!!!
AJAX实现搜索联想 自动补全
代码路径:ajax-autocomplete
- 什么是搜索联想?自动补全?
- 百度是一个很典型的代表。在百度的搜索框中输入相关信息的时候,会有搜索联想以及自动补全。
- 搜索联想和自动补全:实际上是为了方便用户的使用。让用户的体验更好。
- 搜索联想:当用户输入一些单词之后,自动联想出用户要搜索的信息,给一个提示。
- 自动补全:当联想出一些内容之后,用户点击某个联想的单词,然后将这个单词自动补全到搜索框当中。
- 搜索联想和自动补全功能,因为是页面局部刷新效果,所以需要使用ajax请求来完成。
- 搜索联想,自动补全功能的核心实现原理?
- 当键盘事件发生之后,比如:keyup:键弹起事件。 发送ajax请求,请求中提交用户输入的搜索内容,例如:北京(发送ajax请求,携带“北京”两个字)
- 后端接收到ajax请求,接收到“北京”两个字,执行select语句进行模糊查询。返回查询结果。
- 将查询结果封装成json格式的字符串,将json格式的字符串响应到前端。
- 前端接收到json格式的字符串之后,解析这个json字符串,动态展示页面。
附录:HTTP状态信息(状态码)
1xx: 信息
消息: | 描述: |
---|---|
100 Continue | 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。 |
101 Switching Protocols | 服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。 |
2xx: 成功
消息: | 描述: |
---|---|
200 OK | 请求成功(其后是对GET和POST请求的应答文档。) |
201 Created | 请求被创建完成,同时新的资源被创建。 |
202 Accepted | 供处理的请求已被接受,但是处理未完成。 |
203 Non-authoritative Information | 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝。 |
204 No Content | 没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。 |
205 Reset Content | 没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。 |
206 Partial Content | 客户发送了一个带有Range头的GET请求,服务器完成了它。 |
3xx: 重定向
消息: | 描述: |
---|---|
300 Multiple Choices | 多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。 |
301 Moved Permanently | 所请求的页面已经转移至新的url。 |
302 Found | 所请求的页面已经临时转移至新的url。 |
303 See Other | 所请求的页面可在别的url下被找到。 |
304 Not Modified | 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。 |
305 Use Proxy | 客户请求的文档应该通过Location头所指明的代理服务器提取。 |
306 Unused | 此代码被用于前一版本。目前已不再使用,但是代码依然被保留。 |
307 Temporary Redirect | 被请求的页面已经临时移至新的url。 |
4xx: 客户端错误
消息: | 描述: |
---|---|
400 Bad Request | 服务器未能理解请求。 |
401 Unauthorized | 被请求的页面需要用户名和密码。 |
402 Payment Required | 此代码尚无法使用。 |
403 Forbidden | 对被请求页面的访问被禁止。 |
404 Not Found | 服务器无法找到被请求的页面。 |
405 Method Not Allowed | 请求中指定的方法不被允许。 |
406 Not Acceptable | 服务器生成的响应无法被客户端所接受。 |
407 Proxy Authentication Required | 用户必须首先使用代理服务器进行验证,这样请求才会被处理。 |
408 Request Timeout | 请求超出了服务器的等待时间。 |
409 Conflict | 由于冲突,请求无法被完成。 |
410 Gone | 被请求的页面不可用。 |
411 Length Required | “Content-Length” 未被定义。如果无此内容,服务器不会接受请求。 |
412 Precondition Failed | 请求中的前提条件被服务器评估为失败。 |
413 Request Entity Too Large | 由于所请求的实体的太大,服务器不会接受请求。 |
414 Request-url Too Long | 由于url太长,服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时,就会发生这种情况。 |
415 Unsupported Media Type | 由于媒介类型不被支持,服务器不会接受请求。 |
416 | 服务器不能满足客户在请求中指定的Range头。 |
417 Expectation Failed |
5xx: 服务器错误
消息: | 描述: |
---|---|
500 Internal Server Error | 请求未完成。服务器遇到不可预知的情况。 |
501 Not Implemented | 请求未完成。服务器不支持所请求的功能。 |
502 Bad Gateway | 请求未完成。服务器从上游服务器收到一个无效的响应。 |
503 Service Unavailable | 请求未完成。服务器临时过载或当机。 |
504 Gateway Timeout | 网关超时。 |
505 HTTP Version Not Supported | 服务器不支持请求中指明的HTTP协议版本。 |
请求才会被处理。 | |
408 Request Timeout | 请求超出了服务器的等待时间。 |
409 Conflict | 由于冲突,请求无法被完成。 |
410 Gone | 被请求的页面不可用。 |
411 Length Required | “Content-Length” 未被定义。如果无此内容,服务器不会接受请求。 |
412 Precondition Failed | 请求中的前提条件被服务器评估为失败。 |
413 Request Entity Too Large | 由于所请求的实体的太大,服务器不会接受请求。 |
414 Request-url Too Long | 由于url太长,服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时,就会发生这种情况。 |
415 Unsupported Media Type | 由于媒介类型不被支持,服务器不会接受请求。 |
416 | 服务器不能满足客户在请求中指定的Range头。 |
417 Expectation Failed |
5xx: 服务器错误
消息: | 描述: |
---|---|
500 Internal Server Error | 请求未完成。服务器遇到不可预知的情况。 |
501 Not Implemented | 请求未完成。服务器不支持所请求的功能。 |
502 Bad Gateway | 请求未完成。服务器从上游服务器收到一个无效的响应。 |
503 Service Unavailable | 请求未完成。服务器临时过载或当机。 |
504 Gateway Timeout | 网关超时。 |
505 HTTP Version Not Supported | 服务器不支持请求中指明的HTTP协议版本。 |