前端技术_jQuery（第三章Ajax）

最新推荐文章于 2023-03-17 20:34:33 发布

浅水壁虎

最新推荐文章于 2023-03-17 20:34:33 发布

阅读量279

点赞数 1

分类专栏：前端js

本文链接：https://blog.csdn.net/huyiju/article/details/84751845

版权

前端js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1：什么是Ajax

ajax是与服务器交换数据的新技术，他在不重载全部页面的前提下，实现了对部分页面的更新。

AJAX=异步的JavaScript和xml(Asynchronous JavaScript and xml)

XMLHttpRequest是ajax的基础，所有的现代浏览器均支持XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest用于在后台和服务器交换数据，可以在不加载整个网页的情况下，对网页的某一部分进行局部刷新。

2：js的ajax

js的ajax也我们通常叫原生ajax，案例环境是原生ajax和SpringMVC,前端模仿百度搜索框，在随便填写任意字符的情况下，采用ajax的方式请求后端代码，获取静态数据。在项目进行前请搭建一个简单的springmvc项目框架。

js的ajax语法是如下四步：

第一步创建xmlhttprequest对象：var xmlhttp=new XMLHttpRequest();

第二步创建请求地址：xmlhttp.open("请求方式get或者post","请求地址",true);

第三部发送数据：xmlhttp.send();

第四部进入根据状态变化方法：xmlhttp.onreadystatechange=function(){

}

以下就是JavaScript的ajax的get和post方式核心代码和运行结果

2.1 原生ajax的get方式

页面jsp部分

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//ajax获取用户输入信息
/* onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status	200: "OK"
404: 未找到页面 

*/
function getMore() {
	//获取用户输入
	var a=document.getElementById("keyword").value;
	if(a==""){
		//alert("为空");
		return;
	}
	
	//步骤1:创建向服务器发送数据的全局关键对象xmlhttp
	 xmlhttp=createXmlHttp();
	
	
	//步骤2:向指定地址发送信息；采用get方式  
	//建立连接 true会在send方法后继续执行  而不进入等待服务器响应
	xmlhttp.open("get", "search?name="+a, true);
	xmlhttp.send();
	
	
	//步骤3:xmlhttp的状态是在0-4之间，通常只关心4请求已完成，且响应已就绪
	//绑定回调方法，会在xmlhttp状态改变的时候调用
	xmlhttp.onreadystatechange=callback1;

}
function callback1(){
	//alert("进入回调函数！")
	if(xmlhttp.readyState==4){
		document.getElementById('stuinfo').innerHTML='4: 请求已完成，且响应已就绪';
		//200服务器相应成功 404找不到资源 500内部错误
		if(xmlhttp.status==200){
			//交互成功，得到相应数据，是文本格式
			//alert("异步请求成功，请查看结果");
			var result=xmlhttp.responseText;
			
			//固定语法 解析获取数据
			var resultJson=eval("("+result+")");
			//alert("结果："+result);
			//调用方法解析json数据，并且在页面展示改数据
			dealdata(resultJson)
		}else{
			alert("异步请失败，没有返回结果");
			
		}
	}else if(xmlhttp.readyState==3){
		document.getElementById('stuinfo').innerHTML='3: 请求处理中';
	}else if(xmlhttp.readyState==2){
		document.getElementById('stuinfo').innerHTML='2: 请求已接收';
	}else if(xmlhttp.readyState==1){
		document.getElementById('stuinfo').innerHTML='1: 服务器连接已建立';
	}else if(xmlhttp.readyState==0){
		document.getElementById('stuinfo').innerHTML='0: 请求未初始化';
	}
	
}

//解析
function dealdata(resultJson){
	//获取关联数据长度
	var size=resultJson.length;
	for (var i = 0; i < size; i++) {
		var nextNode=resultJson[i];//第i个元素
		var id=nextNode.id;
		var name=nextNode.name;
		var birthday=nextNode.birthday;
		var data="编号："+id+"姓名："+name+"生日："+birthday;
		document.getElementById("stuinfo"+i).innerHTML=data;
	}
}
function createXmlHttp() {
	var xmlhttp;
	if(window.XMLHttpRequest){
		//当前主流浏览器
		xmlhttp=new XMLHttpRequest();
	}else{//ie6 ie5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlhttp;
}
</script>

</head>
<body>
	<div id="mydiv">
		<!-- 键盘按下时触发 -->
		<input type="text" id="keyword" size="50" onkeyup="getMore()">
		<input type="button" value="百度一下原生ajax的get提交">
		<div class="frame">
            <ul id="stuinfo">
                <li>正在加载中...</li>
            </ul>
            <ul id="stuinfo0">
                <li></li>
            </ul>
            <ul id="stuinfo1">
                <li></li>
            </ul>
            <ul id="stuinfo2">
                <li></li>
            </ul>
        </div>
	</div>



</body>
</html>

SpringMVC的后端代码，后端代码返回的是静态数据


	//ResponseBody 将返回数据直接写入到respon的body里边,text/plain;charset=UTF-8返回值为text
	/**
	 * @param response
	 * @param name
	 * @return
	 * 返回xml
	 */
	@RequestMapping(value="/search",produces="text/plain;charset=UTF-8")
	@ResponseBody
	public String jsAjax1String(HttpServletResponse response,String name) {
		 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss aa");  
		System.out.println("传递参数是："+name);
		
		//设置静态数据
		List<User> list=new ArrayList<User>();
		User user0=new User();
		user0.setId(0);
		user0.setName("张三");
		user0.setBirthday(sdf.format(new Date()));
		
		User user1=new User();
		user1.setId(1);
		user1.setName("玫瑰");
		user1.setBirthday(sdf.format(new Date()));
		
		User user2=new User();
		user2.setId(2);
		user2.setName("喵喵");
		user2.setBirthday(sdf.format(new Date()));
		list.add(user0);
		list.add(user1);
		list.add(user2);
		
		
		System.out.println(JSONArray.fromObject(list));
		return JSONArray.fromObject(list).toString();
	}

页面效果截图输入框填写前

页面效果截图输入框填任意字符写后

2.2原生ajax的post方式

页面jsp部分

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>


<style type="text/css">
#mydiv {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -50px
}
</style>
<script type="text/javascript">
//ajax获取用户输入信息
/* onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status	200: "OK"
404: 未找到页面 

*/
function getMore() {
	//获取用户输入
	document.getElementById('stuinfo0').innerHTML="";

	var a=document.getElementById("keyword").value;
	if(a==""){
		//alert("为空");
		return;
	}
	
	//步骤1：向服务器发送数据的关键对象xmlhttp
	 xmlhttp=createXmlHttp();
	
	//步骤2：向指定地址发送信息；
	//建立连接 true会在send方法后继续执行  而不进入等待服务器响应
	xmlhttp.open("post", "search2", true);
	//此处是post比get方式新增设置请求头
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//请求数据放到send方法中
	xmlhttp.send("id=9&name=香蕉&birthday=2018-12-05 16:01:31");
	
	//步骤3：绑定回调方法，会在xmlhttp状态改变的时候调用
	//xmlhttp的状态是在0-4之间，通常只关心4请求已完成，且响应已就绪
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4){
			document.getElementById('stuinfo').innerHTML='4: 请求已完成，且响应已就绪';
			if(xmlhttp.status==200){
				var result=xmlhttp.responseText;
				var jsonResult=eval("("+result+")");
				for(var i=0;i<jsonResult.length;i++){
					var nextNode=jsonResult[i];//第i个元素
					var id=nextNode.id;
					var name=nextNode.name;
					var birthday=nextNode.birthday;
					var data="编号："+id+"姓名："+name+"生日："+birthday;
					document.getElementById("stuinfo"+i).innerHTML=data;
				}	
			}else{
				alert("ajax请求失败！");
			}
		}else if(xmlhttp.readyState==3){
			document.getElementById('stuinfo').innerHTML='3: 请求处理中';
		}else if(xmlhttp.readyState==2){
			document.getElementById('stuinfo').innerHTML='2: 请求已接收';
		}else if(xmlhttp.readyState==1){
			document.getElementById('stuinfo').innerHTML='1: 服务器连接已建立';
		}else if(xmlhttp.readyState==0){
			document.getElementById('stuinfo').innerHTML='0: 请求未初始化';
		}
		
	}

}



function createXmlHttp() {
	var xmlhttp;
	if(window.XMLHttpRequest){
		//当前主流浏览器
		xmlhttp=new XMLHttpRequest();
	}else{//ie6 ie5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlhttp;
}
</script>

</head>
<body>
	<div id="mydiv">
		<!-- 键盘按下时触发 -->
		<input type="text" id="keyword" size="50" onkeyup="getMore()">
		<input type="button" value="百度一下原生ajax的post提交">
		<div class="frame">
            <ul id="stuinfo">
                <li>正在加载中...</li>
            </ul>
           <p id="stuinfo0"></p>

        </div>
	</div>

</body>
</html>

后端controller有实体接受ajax传递的数据

	@RequestMapping(value="/search2",produces="text/plain;charset=UTF-8")
		@ResponseBody
		public String jsAjax1String2(User user) {
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss aa");  
			System.out.println("传递参数是："+user.toString());
			List<User> list=new ArrayList<User>();
			list.add(user);
			System.out.println(JSONArray.fromObject(list));
			return JSONArray.fromObject(list).toString();
		}

输入前截图

输入后截图

3：jQuery_Ajax的使用

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 http Get 和 http Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

3.1jQuery_Ajax的get方式

3.2jQuery_Ajax的post方式

4:两者对比

浅水壁虎

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端技术_jQuery（第三章Ajax）

目录1：什么是Ajax2：js的ajax2.1原生ajax的get方式2.2原生ajax的post方式3：jQuery_Ajax的使用3.1jQuery_Ajax的get方式3.2jQuery_Ajax的post方式4:两者对比1：什么是Ajaxajax是与服务器交换数据的新技术，他在不重载全部页面的前提下，实现了对部分页面的更新。AJAX=异步的Ja...
复制链接

扫一扫

专栏目录