JQuery Ajax

最新推荐文章于 2024-03-02 11:21:12 发布

qq_36594703

最新推荐文章于 2024-03-02 11:21:12 发布

阅读量179

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_36594703/article/details/78254762

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.什么是同步，什么是异步？
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。
2.Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意操作，直到服务器Duan将数据返回给ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。
3.原生Ajax

所有的异步访问都是通过ajax引擎

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	function fn1(){
		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				//5、接受相应数据
				var res = xmlHttp.responseText;
				document.getElementById("span1").innerHTML = res;
			}
		}
		//3、绑定地址
		xmlHttp.open("GET","/WEB/ajaxServlet?name=lisi",true);
		//4、发送请求
		xmlHttp.send();
		
	}
	function fn2(){
		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				//5、接受相应数据
				var res = xmlHttp.responseText;
				document.getElementById("span2").innerHTML = res;
			}
		}
		//3、绑定地址
		xmlHttp.open("POST","/WEB/ajaxServlet",false);
		//4、发送请求
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=wangwu");
		
	}

	
</script>

</head>
<body>
	<input type="button" value="异步访问服务器端" οnclick="fn1()"><span id="span1"></span>
	<br>
	<input type="button" value="同步访问服务器端" οnclick="fn2()"><span id="span2"></span>
	<br>
	<input type="button" value="测试按钮" οnclick="alert()">
</body>
</html>

AjaxServlet
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		// response.getWriter().write("zhangsan");
		try{
			Thread.sleep(5000);
		}catch(InterruptedException e){
			e.printStackTrace();
		}
String parameter = request.getParameter("name");
		
		response.getWriter().write(Math.random()+parameter);
	}

4.Json数据格式（重要）
json是一种与语言无关的数据交换的格式，使用ajax进行前后台数据交换，移动端与服务端的数据交换
1）json的格式与解析
json有两种格式：
对象格式：{"key1":obj,"key2":obj,"key3":obj}
数组格式：[obj,obj,obj]
例如：user对象用json数据格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京","account":{"money":32000,"time":"2015-12"}}
[{"pid":"10","pname":"小米 4c"},{},{}]
注意：对象格式和数组格式可以相互嵌套
注意：json的key是字符串 json的value是object
json是js原生的内容，也就以为着js可以直接取出json对象中的数据

(1) [{key:value,key:value},{key:value,key:value}]
var persons=[
	             {"firstname":"张","lastname":"三丰","age":100},
	             {"firstname":"李","lastname":"四","age":50}
	             ];
  	alert(persons[1].lastname);
  	alert(persons[0].age);
(2){key:value,key:value}
var person={"firstname":"张","lastname":"三丰","age":100}
	 //取出lastname
	 alert(person.lastname);
	 alert(person.age);
(3){
	 *   "param":[{key:value,key:value},{key:value,key:value}]
	 * }
var json={
			 "baobao":[
			           {"name":"小双","age":28,"addr":"扬州"},
			           {"name":"建宁","age":18,"addr":"紫禁城"},
			           {"name":"阿克","age":10,"addr":"陕西"},
			           ]
	 }
	 alert(json.baobao[1].name);
	 alert(json.baobao[2].addr);
(4){
	 *   "param1":[{key:value,key:value},{key:value,key:value}],
	 *   "param2":[{key:value,key:value},{key:value,key:value}],
	 *   "param3":[{key:value,key:value},{key:value,key:value}]
	 * }
var json={
			 "baobao":[
			           {"name":"小双","age":28,"addr":"扬州"},
			           {"name":"建宁","age":18,"addr":"紫禁城"},
			           {"name":"阿克","age":10,"addr":"陕西"},
			           ],
			  "haohao":[
					   {"name":"张双","age":25,"addr":"吉林"},
					   {"name":"舒洁","age":18,"addr":"赤峰"},
					   {"name":"阿克","age":10,"addr":"陕西"},
					   ]
	 };
	 alert(json.haohao[1].name);

5.Jquery的Ajax技术（重点）
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，在开发中经常使用的有三种
1）$.get(url,[data],[callback],[type])
2)$.post(url,[data],[callback],[type])
其中：
url:代表请求的服务器端地址
data:代表请求服务器端的数据
callback:表示服务器端成功响应所触发的函数（只有正常成功返回才执行)
type:表示服务器端返回的数据类型，常见的有text.json.html
3)$.ajax({option1:value1,option2:value2....});
async:是否异步，true代表异步
data:发送到服务器的参数，建议使用json格式
dataType:服务器端返回的数据类型，常用text,json
success:成功响应执行的函数，对应的类型是function类型
type:请求方式post/get
url:请求服务器端地址

<script type="text/javascript">
	function fn1(){
		$.get(
			"/WEB/ajaxServlet2",//url地址
			{"name":"zhangsan","age":25},//请求参数
			function(data){//执行成功后的回调函数
				alert(data.name);
			},
			"json"
		);
	}
	function fn2(){
		
	}
	function fn3(){
		$.ajax({
			url:"/WEB/ajaxServlet2",
			async:true,
			type:"POST",
			data:{"name":"lucy","age":18},
			success:function(data){
				alert(data.name);
			},
			error:function(){
				alert("请求失败");
			},
			dataType:"json"
		})
	}
</script>
</head>
<body>
	<input type="button" value="get访问服务器端" οnclick="fn1()"><span id="span1"></span>
	<br>
	<input type="button" value="post访问服务器端" οnclick="fn2()"><span id="span2"></span>
	<br>
	<input type="button" value="ajax访问服务器端" οnclick="fn3()"><span id="span2"></span>
	<br>
</body>
</html>
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
		String name=request.getParameter("name");
		String age=request.getParameter("age");
		System.out.println(name+" "+age);
		//java代码只能返回一个json格式的字符串
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write("{\"name\":\"tom\",\"age\":25}");
	}

qq_36594703

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery Ajax

1.什么是同步，什么是异步？同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。2.Ajax的运行原理页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意操作，直到服务器Duan将数据返
复制链接

扫一扫