浏览器<-->请求/响应<-->服务器
客户端(浏览器)从服务器加载网页完毕后,网页中的内容如果需要更改,那么就必须让浏览器重新发送一次请求到服务器,服务器接收请求并处理完毕后会把一个完整的网页返回给客户端(浏览器),
每次操作都必须返回整个页面,带宽,响应速度都有影响的。
AJAX<-->请求/响应<-->服务器
网页中的内容如果需要更改,不使用浏览器发送请求,而是使用JavaScript中的XMLHttpRequest(及Ajax对象)对象发送请求到服务器,服务器接收请求并处理完毕后只返回页面需要的内容,XMLHttpRequest对象接收服务器返回的内容,程序员需要手动(javascript)的把内容更新到页面中。
ajax解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新(不重新加载整个网页的情况下,对网页的某部分进行更新,提高用户的使用体验。
需要局部刷新的页面(要求:至少说出4个)
如果应用中的页面需要局部刷新并且需要与服务器交互,那么就可以使用AJAX;
秘诀:浏览网站的时候,留心观察很多页面未刷新,但是页面中的内容被更改了,这些都是AJAX使用场景; 99%的网站都会用到Ajax。
同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包。(提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事)
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包。(请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕)
1:一个事件 onreadystatechange
2:2个状态 status readyState
3:三个方法 open send setRequestHeader
onreadystatechange,存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
status HTTP响应状态
200: "OK" 请求成功
404: "NOT FOUND" 没有找到对应资源
500:"Server Error" 服务器端错误
readyState
存有 XMLHttpRequest对象的请求状态。从 0 到 4 发生变化。
0: 请求未初始化 未创建
1: 服务器连接已建立 open()方法
2: 请求已接收 send()方法
3: 请求在服务器处理中
4: 请求已完成,且响应已就绪 ,响应完毕
open(method,url,async)
创建请求,并且规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步),false(同步)
send(string) 将请求发送到服务器。
string:仅用于 POST 请求,字符串必须服务器URL编码格式(列如:param1=value1¶m2=value2);
setRequestHeader(header,value)。 添加额外的请求头信息,post提交必须使用。
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
注意:该方法必须在open与send之间调用;
原因:
1、open之后,open是创建一个请求,或者理解为请求的基本准备,如果没有请求,何来设置请求头信息;
2、send之前,send是发送一个请求,请求会把当前请求的头信息进行发送,发送后设置头信息无效;
Ajax检查用户名是否重复
register.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>Insert title here</title> </head> <body> <form action= "" method= "post" > 用户名:<input type= "text" name= "username" onblur= "checkName(this)" /><span id= "msg" ></span><br/><br/> </form> <input type= "button" id= "register" value= "注册" /> </body> <script type= "text/javascript" > var ajax; function createAjax(){ if (window.XMLHttpRequest){ ajax = new XMLHttpRequest; } else { //低版本ie浏览器 ajax = new ActiveXObject( "Microsoft.XMLHTTP" ); } } function checkName(ele) { var username = ele.value; //1. 获取ajax对象 ajax = createAjax(); //2.以异步的方式发出get请求 //ajax.open("GET","checkNameServlet?username="+username+"&flag="+Math.random(),true); ajax.open( "POST" , "checkNameServlet" , true ); //3. 设置请求头 ajax.setRequestHeader( "Context-type" , "application/x-www-from-urlencoded" ); //4. 编写事件函数 ajax.onreadystatechange = function() { if (ajax.readyState== 4 && ajax.status== 200 ){ var data = ajax.responseText; if (data == "true" ){ document.getElementById( "msg" ).innerHTML= "<font style=‘color:green‘>恭喜您,获得一个新账号</font>" ; document.getElementById( "register" ).disabled = false ; //注册按钮状态可用 } else { //console.log("用户名重复"); document.getElementById( "msg" ).innerHTML= "<font style=‘color:red‘>用户名重复</font>" ; document.getElementById( "register" ).disabled = true ; //注册按钮状态禁用 } } } //get发送请求 //ajax.send(); //post发送请求 ajax.send( "username=" +username); } </script> </html> |
CheckNameServlet.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@WebServlet ( "/checkServlet" ) public class CheckNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding( "UTF-8" ); response.setCharacterEncoding( "UTF-8" ); String username = request.getParameter( "username" ); username = new String(username.getBytes(), "UTF-8" ); System.out.println(username+ "----------" ); //后台打印布尔值,前台还是获取字符串。 if (username.equals( "admin" )) { response.getWriter().print( false ); //注册失败 } else { response.getWriter().print( true ); //注册成功 } } } |
City.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
package com.gs.domain; public class City { private Long id; private String name; private City parent; public Long getId() { return id; } public void setId(Long id) { this .id = id; } public String getName() { return name; } public void setName(String name) { this .name = name; } public City getParent() { return parent; } public void setParent(City parent) { this .parent = parent; } public City(Long id, String name, City parent) { super (); this .id = id; this .name = name; this .parent = parent; } public City() { super (); // TODO Auto-generated constructor stub } } |
CityUtils.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
package com.gs.tools; import java.util.ArrayList; import java.util.List; import com.gs.domain.City; public class CityUtils { static List<City> parentCitys = new ArrayList<>(); static List<City> childrenCitys = new ArrayList<>(); static { Long id=1L; City parent = new City(id++, "安徽省" , null ); parentCitys.add(parent); City child = new City(id++, "安庆市" ,parent); childrenCitys.add(child); child = new City(id++, "合肥市" ,parent); childrenCitys.add(child); parent = new City(id++, "浙江省" , null ); parentCitys.add(parent); child = new City(id++, "宁波市" ,parent); childrenCitys.add(child); child = new City(id++, "湖州市" ,parent); childrenCitys.add(child); child = new City(id++, "温州市" ,parent); childrenCitys.add(child); parent = new City(id++, "江苏省" , null ); parentCitys.add(parent); child = new City(id++, "南京市" ,parent); childrenCitys.add(child); child = new City(id++, "苏州市" ,parent); childrenCitys.add(child); child = new City(id++, "无锡市" ,parent); childrenCitys.add(child); } public static List<City> getParentCitys() { return parentCitys; } public static List<City> getChildrenCitys(Long parentId) { List<City> temp = new ArrayList<>(); //临时存储的集合 for (City i :childrenCitys) { if (i.getParent().getId().equals(parentId)) { temp.add(i); } } return temp; } } |
SelectCity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@WebServlet ( "/selectcity" ) public class SelectCity extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType( "text/json;charset=utf-8" ); Long id = new Long(request.getParameter( "parentid" )); List<City> childrenCitys = CityUtils.getChildrenCitys(id); JSON json = JSONSerializer.toJSON(childrenCitys); System.out.println(json); response.getWriter().print(json); } } |
SelectProvince.java
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@WebServlet ( "/selectprovince" ) public class SelectProvince extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType( "text/json;charset=utf-8" ); //设置响应类型 List<City> parentCitys = CityUtils.getParentCitys(); //将集合转换为json对象 JSON json = JSONSerializer.toJSON(parentCitys); response.getWriter().print(json); } } |
provincecity.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>二级联动</title> <script type= "text/javascript" src= "js/jquery-2.1.3.js" ></script> </head> <body> 省:<select id= "province" ></select> 市:<select id= "city" ></select> </body> <script type= "text/javascript" > $(function(){ $.get( "selectprovince" , null ,function(data){ //i 索引从0开始,obj==this 代表当前 $(data)—— json数据。 $(data).each(function(i,obj){ $( "#province" ).append( "<option value=‘" +obj.id+ "‘>" +obj.name+ "</option>" ); }); }); $( "#province" ).change(function(){ $( "#city" ).empty(); var data ={ "parentid" :$( "#province option:selected" ).val()}; //发请求 $.get( "selectcity" ,data,function(data){ $(data).each(function(i,obj) { $( "#city" ).append( "<option >" +obj.name+ "</option>" ); }); }); }); }) </script> </html> |
浏览器<-->请求/响应<-->服务器
客户端(浏览器)从服务器加载网页完毕后,网页中的内容如果需要更改,那么就必须让浏览器重新发送一次请求到服务器,服务器接收请求并处理完毕后会把一个完整的网页返回给客户端(浏览器),
每次操作都必须返回整个页面,带宽,响应速度都有影响的。
AJAX<-->请求/响应<-->服务器
网页中的内容如果需要更改,不使用浏览器发送请求,而是使用JavaScript中的XMLHttpRequest(及Ajax对象)对象发送请求到服务器,服务器接收请求并处理完毕后只返回页面需要的内容,XMLHttpRequest对象接收服务器返回的内容,程序员需要手动(javascript)的把内容更新到页面中。
ajax解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新(不重新加载整个网页的情况下,对网页的某部分进行更新,提高用户的使用体验。
需要局部刷新的页面(要求:至少说出4个)
如果应用中的页面需要局部刷新并且需要与服务器交互,那么就可以使用AJAX;
秘诀:浏览网站的时候,留心观察很多页面未刷新,但是页面中的内容被更改了,这些都是AJAX使用场景; 99%的网站都会用到Ajax。
同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包。(提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事)
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包。(请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕)
1:一个事件 onreadystatechange
2:2个状态 status readyState
3:三个方法 open send setRequestHeader
onreadystatechange,存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
status HTTP响应状态
200: "OK" 请求成功
404: "NOT FOUND" 没有找到对应资源
500:"Server Error" 服务器端错误
readyState
存有 XMLHttpRequest对象的请求状态。从 0 到 4 发生变化。
0: 请求未初始化 未创建
1: 服务器连接已建立 open()方法
2: 请求已接收 send()方法
3: 请求在服务器处理中
4: 请求已完成,且响应已就绪 ,响应完毕
open(method,url,async)
创建请求,并且规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步),false(同步)
send(string) 将请求发送到服务器。
string:仅用于 POST 请求,字符串必须服务器URL编码格式(列如:param1=value1¶m2=value2);
setRequestHeader(header,value)。 添加额外的请求头信息,post提交必须使用。
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
注意:该方法必须在open与send之间调用;
原因:
1、open之后,open是创建一个请求,或者理解为请求的基本准备,如果没有请求,何来设置请求头信息;
2、send之前,send是发送一个请求,请求会把当前请求的头信息进行发送,发送后设置头信息无效;
Ajax检查用户名是否重复
register.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>Insert title here</title> </head> <body> <form action= "" method= "post" > 用户名:<input type= "text" name= "username" onblur= "checkName(this)" /><span id= "msg" ></span><br/><br/> </form> <input type= "button" id= "register" value= "注册" /> </body> <script type= "text/javascript" > var ajax; function createAjax(){ if (window.XMLHttpRequest){ ajax = new XMLHttpRequest; } else { //低版本ie浏览器 ajax = new ActiveXObject( "Microsoft.XMLHTTP" ); } } function checkName(ele) { var username = ele.value; //1. 获取ajax对象 ajax = createAjax(); //2.以异步的方式发出get请求 //ajax.open("GET","checkNameServlet?username="+username+"&flag="+Math.random(),true); ajax.open( "POST" , "checkNameServlet" , true ); //3. 设置请求头 ajax.setRequestHeader( "Context-type" , "application/x-www-from-urlencoded" ); //4. 编写事件函数 ajax.onreadystatechange = function() { if (ajax.readyState== 4 && ajax.status== 200 ){ var data = ajax.responseText; if (data == "true" ){ document.getElementById( "msg" ).innerHTML= "<font style=‘color:green‘>恭喜您,获得一个新账号</font>" ; document.getElementById( "register" ).disabled = false ; //注册按钮状态可用 } else { //console.log("用户名重复"); document.getElementById( "msg" ).innerHTML= "<font style=‘color:red‘>用户名重复</font>" ; document.getElementById( "register" ).disabled = true ; //注册按钮状态禁用 } } } //get发送请求 //ajax.send(); //post发送请求 ajax.send( "username=" +username); } </script> </html> |
CheckNameServlet.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@WebServlet ( "/checkServlet" ) public class CheckNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding( "UTF-8" ); response.setCharacterEncoding( "UTF-8" ); String username = request.getParameter( "username" ); username = new String(username.getBytes(), "UTF-8" ); System.out.println(username+ "----------" ); //后台打印布尔值,前台还是获取字符串。 if (username.equals( "admin" )) { response.getWriter().print( false ); //注册失败 } else { response.getWriter().print( true ); //注册成功 } } } |
City.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
package com.gs.domain; public class City { private Long id; private String name; private City parent; public Long getId() { return id; } public void setId(Long id) { this .id = id; } public String getName() { return name; } public void setName(String name) { this .name = name; } public City getParent() { return parent; } public void setParent(City parent) { this .parent = parent; } public City(Long id, String name, City parent) { super (); this .id = id; this .name = name; this .parent = parent; } public City() { super (); // TODO Auto-generated constructor stub } } |
CityUtils.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
package com.gs.tools; import java.util.ArrayList; import java.util.List; import com.gs.domain.City; public class CityUtils { static List<City> parentCitys = new ArrayList<>(); static List<City> childrenCitys = new ArrayList<>(); static { Long id=1L; City parent = new City(id++, "安徽省" , null ); parentCitys.add(parent); City child = new City(id++, "安庆市" ,parent); childrenCitys.add(child); child = new City(id++, "合肥市" ,parent); childrenCitys.add(child); parent = new City(id++, "浙江省" , null ); parentCitys.add(parent); child = new City(id++, "宁波市" ,parent); childrenCitys.add(child); child = new City(id++, "湖州市" ,parent); childrenCitys.add(child); child = new City(id++, "温州市" ,parent); childrenCitys.add(child); parent = new City(id++, "江苏省" , null ); parentCitys.add(parent); child = new City(id++, "南京市" ,parent); childrenCitys.add(child); child = new City(id++, "苏州市" ,parent); childrenCitys.add(child); child = new City(id++, "无锡市" ,parent); childrenCitys.add(child); } public static List<City> getParentCitys() { return parentCitys; } public static List<City> getChildrenCitys(Long parentId) { List<City> temp = new ArrayList<>(); //临时存储的集合 for (City i :childrenCitys) { if (i.getParent().getId().equals(parentId)) { temp.add(i); } } return temp; } } |
SelectCity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@WebServlet ( "/selectcity" ) public class SelectCity extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType( "text/json;charset=utf-8" ); Long id = new Long(request.getParameter( "parentid" )); List<City> childrenCitys = CityUtils.getChildrenCitys(id); JSON json = JSONSerializer.toJSON(childrenCitys); System.out.println(json); response.getWriter().print(json); } } |
SelectProvince.java
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@WebServlet ( "/selectprovince" ) public class SelectProvince extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType( "text/json;charset=utf-8" ); //设置响应类型 List<City> parentCitys = CityUtils.getParentCitys(); //将集合转换为json对象 JSON json = JSONSerializer.toJSON(parentCitys); response.getWriter().print(json); } } |
provincecity.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>二级联动</title> <script type= "text/javascript" src= "js/jquery-2.1.3.js" ></script> </head> <body> 省:<select id= "province" ></select> 市:<select id= "city" ></select> </body> <script type= "text/javascript" > $(function(){ $.get( "selectprovince" , null ,function(data){ //i 索引从0开始,obj==this 代表当前 $(data)—— json数据。 $(data).each(function(i,obj){ $( "#province" ).append( "<option value=‘" +obj.id+ "‘>" +obj.name+ "</option>" ); }); }); $( "#province" ).change(function(){ $( "#city" ).empty(); var data ={ "parentid" :$( "#province option:selected" ).val()}; //发请求 $.get( "selectcity" ,data,function(data){ $(data).each(function(i,obj) { $( "#city" ).append( "<option >" +obj.name+ "</option>" ); }); }); }); }) </script> </html> |
esponse是响应,所以输出的是请求的地方 ,就像ajax,发送请求后会返回数据,而这个
response.getWriter().print()就类似将得到的数据返回到前端
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest(); //IE7+,...
}else{
request=new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5
用XHR发送请求:
open(method,url,async) 调用XHR对象,async表示同步还是异步,默认为true(异步);
send(String) 发送请求。
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //必须写在open和send中间
request.send("name=王大锤&sex=男");
一、xhr取得响应
1、responseText:获得字符串形式的相应数据。
2、responsXML:获得XML形式的相应数据。
3、status和statusText:以数字和文本形式返回http状态码。
4、getAllResponseHeader():获取所有的响应报头。
5、getResponseHeader():查询响应中的某个字段的值。
6、readyState属性:响应返回成功的时候得到通知。
(1)0:请求未初始化,open还没有调用。
(2)1:服务器连接已建立,open已经调用了。
(3)2:请求已经接收,也就是接收到头信息了。
(4)3:请求处理中,也就是接收到响应主体了。
(5)4:请求已完成,且响应已就绪,也就是响应完成了。
二、典型的xhr建立ajax的过程。(涵盖了ajax的大部分内容)
1、new一个xhr对象。
2、调用xhr对象的open方法。
3、send一些数据。
4、对服务器的响应过程进行监听,来知道服务器是否正确得做出了响应,接着就可以做一些事情。比如获取服务器响应的内容,在页面上进行呈现。
jquery中的ajax
$.ajax({
type:"GET",
url:"service.php?number="+$("#keyword").val(),
dataType:"json", 预期服务器返回数据的类型
success:function(data){
if(data.success){
$("searchResult").html(data.msg);
}else{
$("#searchResult").html("出现错误:" + data.msg);
}
},
error:function(jqXHR){
aler("发生错误:"+ jqXHR.status);
}
});
get/post请求的区别:
1. GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中,这种区别对用户是不可见的。
2. 首先是"GET方式提交的数据最多只能是1024字节",因为GET是通过URL提交数据,那么GET可提交的数据量就跟URL的长度有直接关系了。而实际上,URL不存在参数上限的问题,HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系统的支持。注意这是限制是整个URL长度,而不仅仅是你的参数值数据长度。
3. GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。
get请求和post请求在服务器端的区别:
4. 在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.
HTTP标准包含这两种方法是为了达到不同的目的。POST用于创建资源,资源的内容会被编入HTTP请示的内容中。例如,处理订货表单、在数据库中加入新数据行等。
当请求无副作用时(如进行搜索),便可使用GET方法;当请求有副作用时(如添加数据行),则用POST方法。一个比较实际的问题是:GET方法可能会产生很长的URL,或许会超过某些浏览器与服务器对URL长度的限制。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
---------------------
原文:https://www.cnblogs.com/wzscom/p/10558180.html