Ajax
→Asgnchronous JavaScriptAnd XML(异步的JS和XML)
作用：
使用JavaScript 和后台服务器进行通信
源生浏览器与服务器的通信：
服务器响应整个页面（刷新）：加载慢
刷新：打断用户操作，体验不好
通过Ajax使用浏览器与服务器的通信：
通过响应Js(DOM操作)：使得局部更新
源生的Ajax的使用：
核心类：
XMLHttpRequest：
属于js和服务器进行网络通信，主流浏览器都支持，
非主流浏览器使用ActiveXObject类，如IE8以下版本等
方法：
open("get/post(请求方式)"，"服务器url连接地址"，"true/false(是否异步)")
send("发送的数据")
setRequestHeadr("Content-Type","application/x-www-form-urlencoded")
属性：
reponseText
响应文本（服务器发送回来的数据）
readyState
0 初始化 1 连接（open） 2 发送（send） 3 服务器开始响应（数据没有全部发送）
4 服务器完成响应（数据全部发送完成）
status
200（表示正常）、404、405、500
事件：
onreadystatechange是ajax中执行状态更新
例：
ajax.jsp代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<div class="div1" οnclick="textAjax()">
请求服务器
</div>
<script type="text/javascript">
function textAjax(){
//创建对象
var xhr=new XMLHttpRequest();
//打开连接（三个参数：请求方式，服务器连接地址，是否是异步)
xhr.open("post","http://localhost:8088/demo922/ajax.do",true);
//发送数据，可以多个参数
xhr.send('name=fox');
//建立监听事件
xhr.onreadystatechange=function(){
//监听执行状态
if(xhr.readyState==4){
//监听响应状态
if(xhr.status==200){
//接收servlet传输过来的值,用来改变div1的内容,innerHTML是js里获取内容
document.getElementById("div1").innerHTML=xhr.responseText;
}
}
}
}
</script>
</body>
</html>AjaxServlet.java代码
package com.cdz.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;
@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet{
//重写doget，dopost
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//解决中文传过来的乱码
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=utf-8");
//从封装好的js里拿发送过来的值
String name=req.getParameter("name");
//测试是否取到
System.out.println(name);
resp.getWriter().print(name);
}
}
注：为了减少错误，这里要保证端口号正确，并且接收的值不为空，
注：这个是属于html页面在该servlet项目下，如果不在该项目下需要加请求头 （也就是所说跨域问题）
跨域问题
跨域（Cross-Origin) 就是跨不同的服务器，服务器的保护机制：默认情况下服务器只允许本服务器的Ajax获得数据，不允许其他服务器的Ajax获得数据。
解决办法：
html页面中需要在打开连接后面加
//请求头
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");servlet代码中需要加
//添加跨域请求头,解决html页面不在服务器上，html抱错出现在第一行，
resp.addHeader("Access-Control-Alllow-Origin", "*");