ajax请求

1.  传统交互方式的弊端：

浏览器<-->请求/响应<-->服务器

客户端（浏览器）从服务器加载网页完毕后，网页中的内容如果需要更改，那么就必须让浏览器重新发送一次请求到服务器，服务器接收请求并处理完毕后会把一个完整的网页返回给客户端（浏览器），

每次操作都必须返回整个页面，带宽，响应速度都有影响的。

 

2. AJAX交互方式：

AJAX<-->请求/响应<-->服务器

网页中的内容如果需要更改，不使用浏览器发送请求，而是使用JavaScript中的XMLHttpRequest（及Ajax对象）对象发送请求到服务器，服务器接收请求并处理完毕后只返回页面需要的内容，XMLHttpRequest对象接收服务器返回的内容，程序员需要手动(javascript)的把内容更新到页面中。

 

3. 什么是ajax

 

　　ajax解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新（不重新加载整个网页的情况下，对网页的某部分进行更新，提高用户的使用体验。

4. 哪些场景需要使用ajax ？

需要局部刷新的页面(要求：至少说出4个)

  1. 浏览器地图搜索
  2. 自动提示：Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。3
  3. 用户名重复检查：用户注册时，检查用户名是否存在，及时给用户反馈；4
  4. 邮箱提示：WEB版邮箱系统，当有新邮件到底服务器，浏览器不用刷新页面也知道是否有新邮件；5
  5. 无刷新分页：显示数据列表，用户点击下一页数据，整个页面不会刷新，只把下一页的数据更新到页面中；6
  6. 购物车：用户点击添加到购物车后，能继续进行其他操作，而购物车的数据存储服务器端；=
  7. 用户登录：用户登录的数据通过AJAX传输到后台，如果登录失败直接在当前登录页面提示用户，而不用刷新整个页面；

　如果应用中的页面需要局部刷新并且需要与服务器交互，那么就可以使用AJAX；

  1. 视频网站
  2. 股票网站(轮询)

秘诀：浏览网站的时候，留心观察很多页面未刷新，但是页面中的内容被更改了，这些都是AJAX使用场景； 99%的网站都会用到Ajax。

 

 5. 同步和异步

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包。（提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事）

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包。（请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕）

6.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是发送一个请求，请求会把当前请求的头信息进行发送，发送后设置头信息无效；

7 Ajax正确写代码流程

Ajax检查用户名是否重复

register.html

<!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

@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);//注册成功
		}
	}
}

　

8.　jquery省市

City.java

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

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

@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

@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

<!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>

　　

　　

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/gshao/p/10425147.html