ajax学习总结及案例

1.AJAX = 异步 JavaScript 及 XML（Asynchronous JavaScript and XML）
AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。

通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好。

AJAX 是一种独立于 Web 服务器软件的浏览器技术。

2.老师对ajax的总结：

3.案例：get和post请求判断用户注册

checkNameget.js

//声明用户名<input type="text" name="name" id="name"/>对应的dom对象 
var nameDom ;
//当窗体加载完毕后 触发该匿名函数
window.onload = function(){
  //根据id的名称获取<input type="text" name="name" id="name"/>对应的dom对象 
  nameDom= document.getElementById("name");
  //注册失去焦点的事件
  nameDom.onblur=checkName;
};

//验证用户名
var checkName =function() {
        //1.获取xhr对象 XMLHttpRequest对象
        var xhr =getXHR();
        //XMLHttpRequest对象到底有什么样属性和方法
        //注册回调事件：每当readyState属性值改变时，就会调用一次 该匿名函数
        xhr.onreadystatechange =function(){
             //readyState属性值 有:0：未初始化，1：已发送，2：未响应，3：正在接收，4：请求响应完毕
             //请求响应完毕
             if(xhr.readyState==4){
                   //成功响应
                   if(xhr.status==200){
                       //获取相应的值
                       var text =xhr.responseText;
                       //利用一个非常重要的函数,eval转换成json数据对象
                       var u=eval("("+text+")");
                       //{result:'用户名已经存在'}
                       //获取该json对象的result对应的值
                       var info=u.result;
                       //根据id获取msg对应的dom对象 并设置html文本内容为info信息
                       document.getElementById("msg").innerHTML=info;
                   }
             }
        };
        //打开请求
        xhr.open("GET","./demo.do?name="+nameDom.value,true);//异步处理
        //发送请求
        xhr.send(null);
    };

    //XmlHttpRequest
    function getXHR() {
        var xhr = null;
        //根据不同的浏览器创建方式 不一样
        try {
            //创建这个对象
            xhr = new XMLHttpRequest(); //firefox oper safari 
        } catch (e) {
            try {
                //Msxml2.XMLHTTP.3.0 Msxml2.XMLHTTP.4.0 Msxml2.XMLHTTP.5.0
                xhr = new ActiveXObject("Msxml2.XMLHTTP");// Internet Explorer //6.0+
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");// Internet Explorer //5.0+ 
            }
        }

        return xhr;
    };

checkNamepost.js

//声明用户名<input type="text" name="name" id="name"/>对应的dom对象 
var nameDom ;
//当窗体加载完毕后 触发该匿名函数
window.onload = function(){
  //根据id的名称获取<input type="text" name="name" id="name"/>对应的dom对象 
  nameDom= document.getElementById("name");
  //注册失去焦点的事件
  nameDom.onblur=checkName;
};
//验证用户名
var checkName =function() {



        //1.获取xhr对象 XMLHttpRequest对象
        var xhr =getXHR();
        //XMLHttpRequest对象到底有什么样属性和方法
        //注册回调事件：每当readyState属性值改变时，就会调用一次 该匿名函数
        xhr.onreadystatechange =function(){
             //readyState属性值 有:0：未初始化，1：已发送，2：未响应，3：正在接收，4：请求响应完毕
             //请求响应完毕
             if(xhr.readyState==4){
                   //成功响应
                   if(xhr.status==200){
                       //获取相应的值
                       var text =xhr.responseText;
                       //利用一个非常重要的函数,eval转换成json数据对象
                       var u=eval("("+text+")");
                       //{result:'用户名已经存在'}
                       //获取该json对象的result对应的值
                       var info=u.result;
                       //根据id获取msg对应的dom对象 并设置html文本内容为info信息
                       document.getElementById("msg").innerHTML=info;
                   }
             }
        };
        //打开请求
        xhr.open("POST","./demo.do",true);//异步处理
        //发送post请求的时候 ，必须设置这个头信息 否则 拿不到数据
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //name=chj&pass=123 jquery ajax .post {name:nameDom.value}
        var data="name="+nameDom.value+""; //定义附带的数据
        //发送请求
        xhr.send(data);
    };

    //获取XmlHttpRequest
    function getXHR() {
        var xhr = null;
        //根据不同的浏览器创建方式 不一样
        try {
            //创建这个对象
            xhr = new XMLHttpRequest(); //firefox oper safari 
        } catch (e) {
            try {
                //Msxml2.XMLHTTP.3.0 Msxml2.XMLHTTP.4.0 Msxml2.XMLHTTP.5.0
                xhr = new ActiveXObject("Msxml2.XMLHTTP");// Internet Explorer //6.0+
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");// Internet Explorer //5.0+ 
            }
        }

        return xhr;
    };

测试：

输入已存在的用户名：

输入非已存在的用户名：

感谢老师的教授！