Ajax初识

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

方法

方法名	描述
open(method,URL,async)	建立与服务器的连接 method:提交方式（post/get） URL:提交的路径 async:是否开启异步（true/false）
send(context)	发送请求 context:参数（一般用于放post参数）
setRequsetHeader(header,value)	设置消息头信息

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

1. readyState：XMLHttpRequest的状态信息

状态码	说明
0	XMLHttpRequest对象没有完成初始化 即：刚刚创建。
1	XMLHttpRequest对象开始发送请求 调用了open方法，但还没有调用send方法。请求还没有发出
2	XMLHttpRequest对象的请求发送完成 send方法已经调用，数据已经提交到服务器，但没有任何响应
3	XMLHttpRequest对象开始读取响应，还没有结束 收到了所有的响应消息头，但正文还没有完全收到
4	XMLHttpRequest对象读取响应结束 一切都收到了

2. status：HTTP的状态码

状态码	说明
200	服务器响应正常
400	无法找到请求资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

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

请求

1. get请求

//1.创建XMLHttpRequset对象
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");
    }
}

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+, Firefox, Chrome, Opera, 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("Post","/user",true);
        //4. 发送数据给浏览器
        xmlHttp.send();
    }
}

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

案例

1. 用户名验证

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

2. 搜索提示

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

3. 后台json数据交互