Ajax
AJAX：“Asynchronous JavaScript and XML”，异步的JavaScript和XML。但好像没XML啥事儿，主要就是一堆JavaScript代码。
普通的网页请求回执过程（请求响应模式），浏览器发出请求之后要等着浏览器返回请求，期间不能做任何事。
Ajax模式，浏览器将请求发送给Ajax引擎，让其去和服务器请求并且等待返回的数据，浏览器还可以接着向下执行别的操作。
打个比方，传统方式是一个人在干活，ajax是两个人在干活。
Ajax是一个浏览器端的技术，Ajax引擎是由浏览器实现的。Ajax技术的主要目的在于局部交换客户端和服务器之间的数据。能够不用重新载入整个页面来更新资料，也就是Refresh without Reload（轻刷新）。
与服务器之间的沟通，完全是通过JavaScript来实行。因为不用重新载入整个页面，Ajax传送的数据量很小，反应也会很快。注：JavaScript是一门单线程语言，无法指定开启新的线程。
Get方式
新建一个Ajax.jsp，填写代码
<%@ 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></title>
<script>
window.onload=function(){
//给按钮注册一个单击事件
document.getElementById('btnClick').onclick=function(){
//1.创建一个XMLHttpRequest对象
var xhr=null;
//通过能力检测，在不同浏览器中创建该对象
if(XMLHttpRequest){
xhr=new XMLHttpRequest();
}else if(ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
//2.设置回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==&&xhr.status==){
document.getElementById('dvTime').innerHTML='当前时间：'+xhr.responseText;
}
};
//3.初始化请求，告诉xhr对象，使用get还是post请求，要请求哪个地址，是否是异步请求
xhr.open('get','ShowTime.jsp',true);
//如果想传递参数的话
//xhr.open('get','ShowTime.jsp?name=eaglezsx&age=22',true);
//通过Ajax发起请求，如果需要手动设置请求报文头，则需要在初始化之后（open），在发送请求之前(send)
xhr.setRequestHeader('if-modified-since','0');//设置浏览器不使用缓存
//4.开始发起请求
xhr.send();//因为当前使用的是get请求，没有请求报文体，所以传递null参数。
};
};
</script>
</head>
<body>
<input type="button" id="btnClick" value="获取服务器时间"/>
<div id="dvTime">
当前时间：
</div>
</body>
</html>
新建一个ShowTime.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
out.write(new java.util.Date().toLocaleString());
%>
Post方式
xhr.open("POST", "ShowTime.jsp", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//添加请求头
xhr.send("name=eaglezsx&age=22");
XMLHttpRequest对象
XMLHttpRequest 是 AJAX 的核心对象。所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。
创建对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest就是个变量，如果浏览器中定义了，为Object，会转换为true。如果没有定义，会转换为undefined，而undefined会转换为false。
向服务器发送请求
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
open(method , url , async):规定请求的类型、URL以及是否异步处理请求。method：请求的类型；GET或POST。url：文件在服务器上的位置。async：true(异步)或false（同步）。
send(string)：将请求发送到服务器。string：仅用于POST请求。
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader(header,value):向请求添加HTTP头。
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应数据
onreadystatechange事件
当请求被发送到服务器时，需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。
onreadystatechange：存储函数，每当readyState属性改变时，就会调用该函数。
readyState：存有XMLHttpRequest的状态。从0到4发生变化。
- 0：请求未初始化
- 1：服务器连接已建立
- 2：请求已接收
- 3：请求处理中
- 4：请求已完成，且响应已就绪
status：200：“OK”，404：“未找到页面”
在onreadystatechange事件在中，规定当服务器响应已做好被处理的准备时所执行的任务。
当readyState等于4且状态为200时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState== && xmlhttp.status==)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
注意事项
- XMLHttpRequest只能向同一个域中的相同端口号、相同协议的url发起请求，不能跨域,否则会引起错误。
- 为了浏览器兼容,get请求时最好为send()传递null参数。
- 在创建了xhr对象后立刻设置onreadystatechange事件，这样就能监视到所有的状态。如果不需要监视其他状态只监视readyState==4的状态则可以在send()之前设置。
- get请求会有缓存问题,解决方式有
-
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true)//每次的都不一样;
-
xhr.setRequestHeader('if-modified-since','0');
-
- POST请求 时，为了像表单那样提交数据需要设置请求的Content-Type为：application/x-www-form-urlencoded。send(“键=值&键=值”)
- 通过ajax只能传递一些基本的数据，传递不了文件，要通过别的插件实现
jQuery方式Ajax
$(function(){
$("#btnClick").click(function(){
$.get("ShowTime.jsp",{"name":"eaglezsx","age":},
function(data){
$("#dvTime").html("当前时间"+data);
});
});
});
若是post请求直接把get改成post就行了
还有一种形式
$("#txtLoginId").blur(function () {
$.ajax({
type:"post",
url:"song.php",
data:"name=joh&lat=ddd",
success:function (msg) {
alert(msg);
}
});
});