一.什么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或者谷歌浏览器的调用工具看错