Ajax定义

• Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML，实质上是就是用JavaScript的XMLHttpRequset对象实现的
• 它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术，是基于JavaScript、XML、HTML、CSS、异步新用法
  
  

Ajax：只刷新局部页面的技术

l JavaScript：更新局部的网页

l XML：一般用于请求数据和响应数据的封装

l XMLHttpRequest对象：发送请求到服务器并获得返回结果（js中的）

l CSS：美化页面样式

l 异步：发送请求后不等返回结果，由回调函数处理结果

XMLHttpRequest对象&创建对象

关于XMLHttpRequset对象

• 定义：XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力
  
• 作用：用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
• 支持：所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

创建XMLHttpRequest对象

由于IE5、IE6的兼容性问题，所以要视情况创建对象

function getAjax(){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+,Firefox,Chrome,Opera,Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6,IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }

XMLHttpRequset 对象的相关API

方法

属性（一般用于处理结果时进行判断）

1. readyState：XMLHttpRequest的状态信息

2. status：HTTP的状态码

3. responseText：获得响应的文本内容
4. responseXML：获得响应的XML文档对象 documednt

请求

1. get请求

//1.创建XMLHttpRequset对象
function getAjax(){
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+,Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6,IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function doAjax(){
    //获取XMLHttpRequest对象
    var xmlHttp = getAjax();
    //2.监听readyState状态
    xmlHttp.onreadystatechange = function(){
        //5.成功后处理结果
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            vat text = xmlHttp.responseText;
        }
        //3.建立与服务器的连接
        xmlHttp.open("GET","/user?id=1001",true);
        //4. 发送数据给浏览器
        xmlHttp.send();
    }
}

1. post请求

//1.创建XMLHttpRequset对象
function getAjax(){
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+,IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function doAjax(){
    //获取XMLHttpRequest对象
    var xmlHttp = getAjax();
    //2.监听readyState状态
    xmlHttp.onreadystatechange = function(){
        //5.成功后处理结果
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            vat text = xmlHttp.responseText;
        }
        //3.建立与服务器的连接
        xmlHttp.open("Post","/user",true);
        //4. 发送数据给浏览器
        xmlHttp.send();
    }
}

区别：get直接通过URL传值，Post通过send()传值

案例

1. 用户名验证

   • 一般是在用户进行注册时
   • 在用户名输入框（input）上注册一个触发事件（如onChange（）、onKeyup()等）
   • 每当事件触发时就调用ajax将用户输入的值传给后台校验，
   • 然后将结果（一般是提示信息）反馈给ajax让前台展示。

2. 搜索提示

   原理差不多，将事件注册在搜索框上，获取用户键入的值传给后台查询数据库，将结果反馈给ajax展示

3. 后台json数据交互