ajax学习总结及案例

前端之家收集整理的这篇文章主要介绍了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;
    };

测试:

输入已存在的用户名

输入非已存在的用户名


感谢老师的教授!

猜你在找的Ajax相关文章