小生初学阶段，若知识点不全和错误，还望各位大神指点！
一，基本内容
1.异步交互：客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情（不需要等）；
2.AJAX——Asynchronous JavaScript and Xml ；客户端与服务器端进行交互，而无需刷新当前页面的技术，称之为AJAX，实现的是B/S架构下的异步交互。
3.在html中用到的<iframe src="">元素，嵌入一个网页，也是实现异步交互的技术。
4.与同步交互的区别
（1）同步交互：客户端向服务器端发送请求时，到服务器端进行响应，这个过程中，用户是不能做任何其他事情（只能等）；
*执行速度相对比较慢，响应的是完整的html页面。
（2）异步交互
*执行速度相对比较快，响应的是部分数据。
二，实现ajax的异步交互步骤
1.创建XMLHttpRequest对象
function getXhr(){
//声明XMLHttpRequest对象
var xhr=null;
//根据浏览器的不同情况进行创建
if（window.XMLHttpRequest){
//表示除IE外的其他浏览器
xhr=new XMLHttpRequest();
}else{
//表示ie浏览器（8及以前版本）
xhr=new ActiveXobject('Microsoft.XMLHttp');
}
return xhr;
}
此对象特别重要，建议记住！
2.与服务器端建立连接*使用XMLHttpRequest对象的 open（method，url）方法
*method——设置当前请求的类型
*url——设置当前请求的地址
3.向服务器端发送请求*使用XMLHttpRequest对象的 send(请求参数）方法
*请求参数的格式——key=value
4.接收服务器端的响应数据（1）使用XMLHttpRequest对象的 onreadystatechange事件，监听服务器端的通信状态。
（2）使用XMLHttpRequest对象的 readyState属性，判断服务器端的当前状态（0-4）。
*0——（服务器端）尚未初始化
*1——（服务器端）正在接收
*2——（服务器端）接收完毕
*3——（服务器端）正在响应
*4——（服务器端）响应完毕
（3）使用XMLHttpRequest对象的 status属性，判断服务器端的状态码（200）。
（4）使用XMLHttpRequest对象的responseText属性，接收服务器端的响应数据。
注意：上述2中method参数有get与post,两种请求类型不同，写法也就不同。
**GET请求方式：*send（）方法不起作用，但是不能被忽略！ xhr.send(null);
*请求参数——添加到 URL？key=value;
*get请求类型案例：
html页面代码:
<!DOCTYPE html>
<html>
<head>
<title>实现Ajax异步交互</title>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="异步请求" id="btn">
<script>
// 实现Ajax的异步交互的步骤
var btn = document.getElementById("btn");
btn.onclick = function(){
/*
* 1. 实现Ajax主要依靠XMLHttpRequest对象
* * 创建XMLHttpRequest对象
*/
var xhr = getXhr();
/*
* 2. 与服务器端建立连接
*/
xhr.open("get","01.php?user=zhangwuji");
/*
* 3. 客户端向服务器端发送请求
*/
xhr.send(null);
/*
* 4. 客户端接收服务器端的响应
*/
xhr.onreadystatechange = function(){
// 保证服务器端响应的数据发送完毕
if(xhr.readyState == 4){
// 保证这次请求必须是成功的
if(xhr.status == 200){
// 接收服务器端的数据
var data = xhr.responseText;
// 测试
console.log(data);
}
}
}
}
// 定义创建XMLHttpRequest对象的函数
function getXhr(){
// 声明XMLHttpRequest对象
var xhr = null;
// 根据不同浏览器创建
if(window.XMLHttpRequest){
// 其他浏览器
xhr = new XMLHttpRequest();
}else{
// IE浏览器(8及之前)
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
// 返回XMLHttpRequest对象
return xhr;
}
</script>
</body>
</html>
php页面代码:
<?php // 用于处理客户端的Ajax异步请求 // 1. 接收客户端发送的请求数据 $user = $_GET['user']; // 2. 向客户端进行响应 echo $user.' get request succesful.'; ?>
**POST请求方式：
*在send方法被调用前，使用 setRequestHeader()方法设置请求头信息
固定写法：xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
POST方式请求案列：
html页面代码:<!DOCTYPE html>
<html>
<head>
<title>POST方式的Ajax</title>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="异步" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
// 实现Ajax的异步交互
var xhr = getXhr();
xhr.open("post","02.php");
/*
* 如果Ajax使用的是POST请求类型的话
* * 必须要在send()方法调用之前
* * 使用setRequestHeader(key,value)方法
* * 该方法用于设置请求头
*/
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("user=zhangwuji");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
console.log(data);
}
}
}
}
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLhttp");
}
return xhr;
}
</script>
</body>
</html>
php页面代码:
<?php // 1. 接收客户端发送的请求 $user = $_POST['user']; // 2. 进行响应 echo $user.' post request successful.'; ?>
综合案例：使用ajax实现省市/区二级联动
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级联动全ajax实现</title>
</head>
<body>
<select id="shengji">
<option>-请选择-</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
<script>
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}//创建XMLHttpRequest对象
var xhr=getXhr();
var shengji=document.getElementById("shengji");
var city=document.getElementById("city");
window.onload=function(){//页面加载完执行
xhr.open("get","ajaxejld2.php?status=1");
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var data=xhr.responseText;
var province=data.split(",");
for(var i=0;i<province.length;i++){
var option=document.createElement("option");
option.innerHTML=province[i];
shengji.appendChild(option);
}
}
}
}
shengji.onchange=function(){//第一个select发生改变时执行
var opts=city.getElementsByTagName("option");
for(var j=opts.length-1;j>0;j--){
city.removeChild(opts[j]);//先清空第二个select元素
}
if(shengji.value!="-请选择-"){
xhr.open("post","ajaxejld2.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("status=2&province="+shengji.value);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var data=xhr.responseText;
var citys=data.split(",");
for(var i=0;i<citys.length;i++){
var option=document.createElement("option");
option.innerHTML=citys[i];
city.appendChild(option);
}
}
}
}
}
</script>
</body>
</html>
php页面代码：
<?php
$status=$_REQUEST['status'];
if($status==1){
echo'重庆市,北京市,天津市,河北省';
}else{
$province=$_POST['province'];
switch($province){
case '重庆市':
echo'渝中区,渝北区,沙坪坝区,九龙坡区,两江新区,北碚区';
break;
case '北京市':
echo'东城区,西城区,海淀区,朝阳区';
break;
case '天津市':
echo'河东区,河西区,南开区';
break;
case '河北省':
echo'石家庄市,廊坊市,保定市,唐山市,秦皇岛市';
break;
}
}
?>注：上述中数据的格式为HTML（文本格式），ajax数据格式还有XML，json；这只是原生js的操作，还可以用jquery操作，使其更加简单，后面再续写。
点击打开链接