AJAX:
异步的技术，可以异步和服务器发生数据交互
同步： 需要刷新数据直接刷新整个页面，同步
异步： 刷新数据时，使用ajax向服务器发起请求得到响应之后再局部刷新页面
浏览器在向服务器发请求时需要封装请求报文[请求首行 请求头 请求空行 请求体]
XMLHttpRequest：可以通过此对象帮助我们封装请求报文，还可以通过此对象向服务器发送请求
发送请求时，代表请求报文
响应回来时，又代表响应报文
1、创建XMLHttpRequest对象
2、配置参数[url地址+请求方式+请求参数]
3、发送请求
4、接收服务器的响应结果
5、根据结果使用dom局部修改页面
XML的缺点：
虽然容易理解，但是传输效率差
JSON：
1、js中解析json使用JSON对象 stringify(jsonObj), parse(jsonStr);
2、java中一般是将对象或集合转为json字符串
Gson：[需要导入jar包]
可以将对象转为json字符串
将json字符串转为java对象
简单代码样例：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
var btn01 = document.getElementById("btn01");
var div = document.getElementById("div");
//点击按钮发送ajax请求
btn.onclick = function(){
//1、创建对象
var xhr = new XMLHttpRequest();
//2、设置参数
/*
{String} method 请求方式：get/post
{String} url 请求地址
{Boolean} optional async 是否异步 默认true ， false同步
{String} optional username
{String} optional password
*/
var method = "GET";
var url = "${pageContext.request.contextPath}/AServlet?username=laowang&age=20";
xhr.open(method, url);
//3、发送请求
xhr.send();
//4、接收服务器响应数据[js代码执行比较快，服务器的响应此时还没回来，不能直接获取数据]
//只有当请求码为4时才代表响应成功并且数据解析成功
//设置状态码的改变监听，每次改变时系统会自动调用xhr的onreadystatechange方法
xhr.onreadystatechange = function(){
// alert(xhr.readyState);
//只有响应状态码为200才代表成功，解析数据显示到页面
if(xhr.readyState==4 && xhr.status==200){
//代表响应成功
var text = xhr.responseText;
//alert(text);
//显示到页面中
div.innerHTML += text;
}else{
//alert("响应错误！！");
}
};
};
btn01.onclick = function(){
//1、创建XMLHttpRequest对象[IE5和IE6不支持此对象需要考虑兼容性问题]
var xhr = new XMLHttpRequest();
//2、设置参数
var method = "POST";
var url = "${pageContext.request.contextPath}/AServlet";
xhr.open(method,url);
//3、发送请求
//ajax发送请求时，默认是get方式提交，服务器解析时不知道有请求体不会解析
//如果是post方式提交数据，需要告诉服务器请求体中有数据需要解析
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("username=laosong&age=20");
//4、设置响应状态监听
xhr.onreadystatechange = function(){
if(xhr.status==200&& xhr.readyState==4){
//响应成功，获取响应数据
//responseText:接收普通文本使用
//responseXML:接收xml格式的文本，此属性会自动将xml格式的文本封装为Document对象
div.innerHTML += xhr.responseText;
//alert(xhr.responseXML);
// var doc = xhr.responseXML;
}
};
};
}Servlet层
package com.atguigu.ajax.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AServlet
*/
public class AServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//response.setContentType("text/html;charset=utf-8");
//如果响应的是xml格式的文本需要设置xml格式
response.setContentType("text/html;charset=utf-8");
//获取请求参数
String username = request.getParameter("username");
String age = request.getParameter("age");
System.out.println("请求到达AServlet---"+username+"--"+age);
User user = new User(1, "liujinghan", "123456", "[email protected]");
System.out.println("daoda");
//验证用户是够存在
//通过response给ajax响应数据
//response.getWriter().write("恭喜你用户名可用!");
//不可以直接写对象，将user转为xml格式传递
//String userXml = "<users><user><username>liujinghan</username><age>30</age><email>[email protected]</email></user></users>";
String jsonStr = "{\"username\":\"laowang\",\"age\":20}";
response.getWriter().write(jsonStr);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}