1.简介
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
//服务器端代码，用于响应返回ajax的请求数据
//ContentServlet.java
package com.imooc.ajax;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ContentServlet
*/
@WebServlet("/content")
public class ContentServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ContentServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().println("<b>I'm server content</b>");
//注意：返回给Ajax的数据，不需要进行页面跳转，通常采用json数据回传
}
}
前端显示代码
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input id="btnLoad" type="button" value="加载">
<div id="divContent"></div> <!-- 从服务器获取的数据写入这个div -->
<script type="text/javascript">
document.getElementById("btnLoad").onclick = function(){
//1.创建XmlHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log(xmlhttp);
//2.发送Ajax请求
xmlhttp.open("GET","/Ajax/content",true);//发送到服务器地址，采用异步
xmlhttp.send();
//3.处理服务器响应
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var t = xmlhttp.responseText;
document.getElementById("divContent").innerHTML = t;//js中往标签中写入文本，也可用Jquery
//
}
}
}
</script>
</body>
</html>
在前端点击"加载"按钮，得到服务器回传的Ajax数据
2.Ajax 用json传递数据
//news.java
package com.imooc.ajax;
public class News {
private String title;
private String date;
private String source;
private String content;
public News(String title, String date, String source, String content) {
super();
this.title = title;
this.date = date;
this.source = source;
this.content = content;
}
public News() {
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getSource() {
return source;
}
public void setSource(String source) {
this.source = source;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
//NewsListServlet.java
package com.imooc.ajax;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
/**
* Servlet implementation class NewsListServlet
*/
@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public NewsListServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List newsList = new ArrayList();
newsList.add(new News("TIBOBE:全球编程语言排行榜5月","2018-5-1","TIOBE","..."));
newsList.add(new News("TIBOBE:全球编程语言排行榜6月","2018-5-1","TIOBE","..."));
newsList.add(new News("TIBOBE:全球编程语言排行榜7月","2018-5-1","TIOBE","..."));
newsList.add(new News("TIBOBE:全球编程语言排行榜8月","2018-5-1","TIOBE","..."));
String json = JSON.toJSONString(newsList);
System.out.println(json);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
}
//news.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//1.创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.发送Ajax请求
xmlhttp.open("GET","/Ajax/news_list",true);
xmlhttp.send();
//3.处理服务器响应
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var text = xmlhttp.responseText;
console.log(text);
//这里的JSON是JS中提供的对象，而非fastjson提供
var json = JSON.parse(text);//将字符串转换成json
console.log(json);
var html = "";
for(var i=0;i<json.length;i++){
var news = json[i];
html = html + "<h1>" + news.title + "</h1>";
html = html + "<h2>" + news.date + " " + news.source + "</h2>";
html = html + "<hr/>";
}
document.getElementById("container").innerHTML = html;
}
}
</script>
</body>
</html>
3.同步和异步的区别
同步状态：代码进入等待状态，响应不返回，程序不会继续向下执行,就是前面代码没执行完后面的代码就会一直等待
异步状态：程序不会处于阻塞状态，程序依旧向下执行，数据返回时，是通过触发onreadystatechange事件进行数据的获取和处理
通常Ajax设置为异步状态
使用了同步，xmlhttp.onereadystatechange=function（）{...}，该事件失效..（将function（）代码取出来放在send()后面就行了）
同步状态：代码进入等待状态，数据不返回，程序不会继续向下执行
异步状态：Ajax不会处于程序的阻塞状态，程序依旧向下执行，数据返回时，是通过触发onreadystatechang事件进行数据的获取和处理
通常Ajax设置为异步状态
