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("I'm server content");
//注意：返回给Ajax的数据，不需要进行页面跳转，通常采用json数据回传
}
}
前端显示代码
//index.html
Insert title here
在前端点击"加载"按钮，得到服务器回传的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
Insert title here
3.同步和异步的区别
同步状态：代码进入等待状态，响应不返回，程序不会继续向下执行,就是前面代码没执行完后面的代码就会一直等待
异步状态：程序不会处于阻塞状态，程序依旧向下执行，数据返回时，是通过触发onreadystatechange事件进行数据的获取和处理
通常Ajax设置为异步状态
使用了同步，xmlhttp.onereadystatechange=function（）{...}，该事件失效..（将function（）代码取出来放在send()后面就行了）
同步状态：代码进入等待状态，数据不返回，程序不会继续向下执行
异步状态：Ajax不会处于程序的阻塞状态，程序依旧向下执行，数据返回时，是通过触发onreadystatechang事件进行数据的获取和处理
通常Ajax设置为异步状态