20190423记录

XHR对象

var xhr = new XMLHttpRequest();//创建一个xhr对象
open(“GET”/”POST”,url,true/false);//参数1：请求类型
//参数2：请求路径，get请求需要将参数拼接到url后面
//参数3：是否异步，true为异步，false为同步，默认为true
send(参数/null);//post请求在此处提交参数，get请求就填写null

同步时，直接调用响应处理方法。
异步时，需要监听xhr对象的readystate事件
xhr.onreadystatechange = function() {
// 如果是异步请求，需要等待数据完全响应后再做处理
if (xhr.readyState == 4) {//readyState=4表示成功完成
// 处理响应结果
callback();
}
}

很可能会用到的方法：将对象格式的参数转换为等号拼接的字符串
function formatParam(data) {
// 判断参数是否存在
if (data == null) {
return “”;
}
// 定义数组，接收每个参数字符串
var params = [];
for(var key in data) {
/* console.log(key);
console.log(data[key]);
console.log(key+"="+data[key]) */
// js中通过push()方法向数组的最后追加
params.push(key+"="+data[key]);
}
console.log(params.join("&"));
var param = params.join("&");// uname=zhangsan&uage=18

	return param;
}

jquery调用ajax方法：

	格式：$.ajax({});
	参数：
	type：请求方式GET/POST
	url：请求地址url
	async：是否异步，默认是true表示异步
	data：发送到服务器的数据
	dataType：预期服务器返回的数据类型
	contentType：设置请求头
	success：请求成功时调用此函数
	error：请求失败时调用此函数

GET方法：
$.ajax({
type:“get”, // 请求类型 GET/POST
url:“js/data.json”, // 请求路径
dataType:“json”, // 预期服务器返回的数据类型
data:{ // 请求参数，键值对的json对象

},
success:function(data){ // 请求成功时的回调函数
	console.log(data);
}

});
$get()的例子：
/* 无参数，无返回值 */
// $.get(“http://localhost:8080/jqueryAjax/ServletTest”);

/* 有参数，无返回值 */
// $.get(“http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan”});

/* 无参数，有返回值 /
/ $.get(“http://localhost:8080/jqueryAjax/ServletTest”,function(data){
console.log(data);
}); */

/* 有参数，有返回值 /
/ $.get(“http://localhost:8080/jqueryAjax/ServletTest",{uname:"zhangsan”},function(data){
console.log(data);
}); */
POST方法：
$.ajax({
type:“post”, // 请求类型 GET/POST
url:“js/data.json”, // 请求路径
dataType:“json”, // 预期服务器返回的数据类型
data:{ // 请求参数，键值对的json对象

},
success:function(data){ // 请求成功时的回调函数
	console.log(data);
}

});
$post()的例子：
1.请求json文件，忽略返回值
$.post(’…/js/cuisine_area.json’);

2.请求json文件，传递参数，忽略返回值
$.post(’…/js/cuisine_area.json’,{name:“tom”,age:100});

3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.post(’…/js/cuisine_area.json’,function(data){
console.log(data)
});

4.请求json文件,传递参数,拿到返回值
$.post(’…/js/cuisine_area.json’,{name:“tom”,age:100},function(data){
console.log(data)
});

某servlet实例

@WebServlet("/ServletTest")
public class ServletTest extends HttpServlet {
private static final long serialVersionUID = 1L;

@Override
protected void service(HttpServletRequest arg0, HttpServletResponse arg1) throws ServletException, IOException {

	System.out.println("正在访问....");
	
	arg1.setHeader("Access-Control-Allow-Origin", "*");//设置可跨域资源共享的域名，//只能设置一个具体的域名，但*可以代表所有 
	arg1.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,OPTIONS");//设//置可跨域资源共享的请求方式 
	arg1.setHeader("Access-Control-Allow-Credentials","true"); 
	arg1.setHeader("Access-Control-Allow-Headers" ,"Origin, X-Requested-With, Content-Type, Accept");

	
	// 接收参数
	String name = arg0.getParameter("uname");
	System.out.println(name);
	
	// 响应数据
	arg1.getWriter().write("{\"name\":\"zhangsan\"}");
}

}