Ajax和jQuery

一.什么Ajax?

• Ajax:异步的Javascript和XML,用于完成局部刷新

• XML是用于数据传输，现在外面开始都使用JSON

• 异步：异步是一个线程在执行中，下一个线程不必等待它执行完就可以开始执行。异步肯定是个多线程。在客户端请求时，可以执行其他线程。异步的效率要高于同步。如果数据在线程间共享，那么必须使用同步！

• ajax同步异步：- 默认是true：异步，false：同步。异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

• 那些场景需要使用ajax

• • 需要局部刷新的页面
    1.浏览器地图搜索
    2.自动提示
    3.用户名重复检查：
    4.邮箱提示：
    5.无刷新分页：
    6.购物车：
    7.用户登录

• 如果应用中的页面需要局部刷新并且需要与服务器交互，那么就可以使用AJAX；
  8.视频网站
  9. 股票网站(轮询）

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

二.原生的Ajax实现方式

• xhr = new XMLHttpRequest() : 通过new它可以创建一个ajax对象【兼容IE需要创建ActiveXObject】

• 2.1 方法(函数)

  • xhr.open(methodType,methodUrl,isSys) -> 准备请求的方式与路径
    • methodType:请求的方式(GET/POST)
    • methodUrl:请求的路径
    • isSys:是否异步(默认为true)
  • xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
    设置请求头的一个类型，如果是POST请求，一定要加这一句，才可以把数据传到后台
    位置:open之后，send之前
  • xhr.send(varBody) -> 发送请求
    • varBody:POST请求传参(key=value&key=value&…)

• 2.2 属性
  xhr.status -> 请求状态(200代表成功)
  xhr.readyState -> 响应状态(4代表响应完成)
  xhr.responseText -> 获取返回的数据(字符串)

• 2.3 事件
  xhr.onreadystatechange =function(){} -> 监听readyState状态的变化

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function login(){
		//1.获取到用户名与密码
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		//2.创建ajax对象
		var xhr = new XMLHttpRequest();
		//3.准备请求的方式与路径 /login?username=xxx&password=xx
		//  get请求在路径中传参，POST请求在send中传参
		xhr.open("post","/login");
		//  如果是post请求，必需设计请求头的类型，后台才可以拿到相应的数据
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//监听相当的事件
		xhr.onreadystatechange = function(){
			if(xhr.status==200 && xhr.readyState==4){
				//返回的  ”true" 与 "false"
				// responseText拿到的都是字符串
				var result = xhr.responseText;
				if(result=="true"){
					//alert("登录成功了!");
					window.location.href="https://www.baidu.com/";
				}else{
					//alert("登录失败了！");
					document.getElementById("errorSpan").innerHTML ="用户名或者密码错误！";
				}
			}
		}
		//4.发送请求(send里面加上发送的数据)
		xhr.send("username="+username+"&password="+password);
	}
</script>

</head>
<body>

<span id="errorSpan"></span>
<form action="/login" method="post">
	用户名：<input type="text" name="username" id="username" /> <br />
	密码<input type="text" name="password" id="password" /><br />
	<input type="button" value="ajax提交" onclick="login()" />
	<input type="submit" value="直接提交"  />
</form>

</body>
</html>

三.注意点

• 使用Ajax请求，后台不进行跳转，只做数据的传输
• 返回的值都是字符串，需要我们自己做相当的判断与转换

四.JSON:JS的对象 对象/字符串

• json传输数据比XML更加方便,简单,精简
  • var jsonStr = {}/[];
• 如果把一个json字符串转成json对象呢？
  eval("("+jsonStr+")") -> 前后加括号
  JSON.parse(jsonStr) -> 必需是标准的json(key必需有双引号)

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

<script type="text/javascript">
	//json对象  json字符串(格式)
	//怎么写json对象
	/*
	var jsonObj = {};
	var jsonArr = [];
	*/
	
	/*
	var jsonObj = {
			name:"张三",
			age:23,
			dept:{
				id:1,
				name:"it部"
			}
	};
	console.debug(jsonObj.name)
	console.debug(jsonObj.dept.name)
	*/
	
	/**
		后台只能传字符串到前台，js中能拿到的也是字符串
	*/
	var jsonStr = '{"name":"张三","age":24}';
	//把json字符串转成一个json对象
	//eval计算 JavaScript 字符串，并把它作为脚本代码来执行
	//  使用eval把一个字符串转成一个json，需要前后加小括号
	//var jsonObj = eval("("+jsonStr+")");
	//console.debug(jsonObj)
	
	//js中专门有一个功能用于把一个字符串变成json格式
	//  JSON.parse要求我们转的必需是一个标准的JSON字符串(key必需有双引号)
	var jsonObj = JSON.parse(jsonStr);
	console.debug(jsonObj)
	
</script>

</head>
<body>

</body>
</html>

五.jQuery

• jQuery是继prototype之后又一款优秀的js框架！！！ -> vue
• jQuery:兼容各种浏览器/写得更少，做得更多
• jQuery的版本:1.x兼容IE,2.X后不兼容IE
• 怎么使用jquery
• 导包：
• 引入
  

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 
	要使用jQuery,首要需要把jQuery引入进来
		jquery-1.11.2.js ：源码版
		jquery-1.11.2.min.js :压缩版(项目上线使用这个)
		我们随便选择一个即可
 -->
 <script type="text/javascript" src="/jquery/jquery-1.11.2.min.js"></script>
 <script type="text/javascript">
 	//alert($);
 	$.post("/json",function(result){
 		console.debug(result)
 	});
 </script>
</head>
<body>

</body>
</html>

• 配置：
• web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>cms</display-name>
 
	<!-- 	核心控制器 -->
	<servlet>
		<servlet-name>dispatcher</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<!-- SpringMVC的配置文件的位置 -->
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:applicationContext-mvc.xml</param-value>
		</init-param>
		<!--记SpringMVC跟着服务器(tomcat)的启动而启动 -->
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>dispatcher</servlet-name>
		<!--使用杠更加符合咱们的RESTful风格 -->
		<url-pattern>/</url-pattern>
	</servlet-mapping>

	<!-- 配置相应的过滤器:角色SpringMVC 的POST请求的乱码问题 -->
	<!-- 配置编码方式过滤器,注意一点:要配置在所有过滤器的前面 -->
 <filter>
   <filter-name>CharacterEncodingFilter</filter-name>
   <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
   <init-param>
     <param-name>encoding</param-name>
     <param-value>utf-8</param-value>
   </init-param>
 </filter>
 <filter-mapping>
   <filter-name>CharacterEncodingFilter</filter-name>
   <url-pattern>/*</url-pattern>
 </filter-mapping>
</web-app>

applicationContext-mvc.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:context="http://www.springframework.org/schema/context"
 xmlns:mvc="http://www.springframework.org/schema/mvc"
 xsi:schemaLocation="
 http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans.xsd
 http://www.springframework.org/schema/context
 http://www.springframework.org/schema/context/spring-context.xsd
 http://www.springframework.org/schema/mvc
 http://www.springframework.org/schema/mvc/spring-mvc.xsd
 " >
  
	<!-- 扫描包 -->
	<context:component-scan base-package="cn.itsource.jquery" />
	<!--支持SpringMVC特有的注解 -->
	<mvc:annotation-driven />
	<!-- 对静态资源放行 -->
	<mvc:default-servlet-handler />
	<!-- 视图解析器：自动为咱们添加前缀与后缀 -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/" />
		<property name="suffix" value=".jsp" />
	</bean>
	<!-- 上传解析器 -->
	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize">
			<value>2000000000</value>
		</property>
	  </bean>
	  
</beans>

引入jQuery的js文件，只要可以打印$就代表引入成功

$.get/post(url,[params,callback])

• params有两种写法:
• {username:xxxx}/username=xxxx
• 可以直接拿到表单中的所有参数:$("#form").serialize();
• $.get/post(url,params,function(){})

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	function login(){
		//serialize() -> 表单序列化
		var params = $("#loginForm").serialize();
		$.post("/login",params,function(result){
			if(result){
				window.location.href = "http://www.baidu.com";
			}else{
				$("#errorSpan").html("登录失败！");
			}
		})
		/*
			//相当于 document.getElementById("username").value;
			var username = $("#username").val();
			var password = $("#password").val();
			//发送请求到后台
			如果要传参，直接在第二个参数中传就可以了
			//var params = {"username":username,"password":password};
			var params = "username="+username+"&password="+password;
			$.post("/login",params,function(result){})
		*/
	}
</script>

</head>
<body>

<span id="errorSpan"></span>
<form id="loginForm" action="/login" method="post">
	用户名：<input type="text" name="username" id="username" /> <br />
	密码<input type="text" name="password" id="password" /><br />
	<input type="button" value="ajax提交" onclick="login()" />
</form>

</body>
</html>

• @ResponseBody:如果你在一个方法上加上这个注解，就代表这里要返回数据(JSON)，而不做跳转

package cn.itsource;

import java.util.Arrays;
import java.util.Date;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloController {

	@RequestMapping("/login")
	@ResponseBody
	public Boolean login(String username,String password){
		if("admin".equals(username)&&"123".equals(password)){
			return true;
		}
		return false;
	}
	
	/**
	 * @ResponseBody:如果你在一个方法上加上这个注解，就代表这里要返回数据(JSON)，而不做跳转
	 */
	@RequestMapping("/json")
	@ResponseBody
	public List<Employee> json(){
		List<Employee> list = Arrays.asList(
					new Employee(1L,"张三1",34),
					new Employee(2L,"张三2",34),
					new Employee(3L,"张三3",34),
					new Employee(4L,"张三4",34)
				);
		return list;
	}
}

异常处理：f12,使用firebug或者谷歌浏览器的调用工具看错