ajax技术笔记

一、什么是ajax（异步 javascript和xml）

为了解决传统的等待->响应->等待的弊端的技术，又叫局部页面刷新技术。可以实现浏览器页面的部分数据更新而不刷新整个页面。

浏览器内置对象（XMLHttpRequest）向服务器发送请求，服务器返回xml数据或文本数据给浏览器，然后浏览器中使用这些数据更新局部的页面信息。

 

等待-响应-等待

指早起的web开发中，表单提交数据浏览器会将注册页面抛弃，等服务器返回一个完整页面。在等待过程中，用户不能做任何操作。服务器生成页面发送给浏览器，浏览器重新解析页面生成相应界面。

 

一、ajax原理

 

 

一、ajax编程

1）获取XMLHttpRequest对象

由于XMLHttpRequest对象并没有标准化，在不同浏览器下支持不同，IE不支持此对象

在IE中使用。但是微软支持一个对象同样可以实现这样的功能。他就是ActiveXObject.                              

 

XMLHttpRequest对象中的重要属性

A.onreadystatechange   注册监听器，绑定一个事件处理函数

B.readyState    返回该XMLHttpRequest对象与服务器通讯的状态

返回值是number类型，不同值表示含义：

　　0 该对象已建立，但未初始化(还没有调用open方法)

　　1 对象已创建并初始化（还没有调用send方法）

　　2 数据发送，send方法调用

　　3 数据传输中，已经接受部分数据

　　4     响应结束，数据接受完毕

C. responseText 获得服务器响应回来的文本内容

D. responseXML 获得服务器返回的XML dom 对象

E.   status 获取状态码

 

2）使用XMLHttpRequest发送请求到服务器

A.get请求

 

function checkName(){
            var xhr=null;
                if(window.XMLHttpRequest){
                    xhr=new XMLHttpRequest();
                }else{
                    xhr=new ActiveXObject();
                }
            xhr.open("get","checkname.do");
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var txt = xhr.responseText;
                        $('namespan').innerHTML = txt;
                    }else{
                        $('namespan').innerHTML = "系统故障，请稍后重试";
                    }
                }else{
                    $('namespan').innerHTML = "正在验证...";
                }
            }
        }

B.post请求

 

function checkName2(){
            var xhr=null
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest;
            }else{
                xhr=new ActiveXObject('Microsoft.XMLHttp');
            }
            xhr.open("post", "checkName.do", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send("user=dhh&password=123");
            xhr.onreadystatechange()==function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var txt = xhr.responseText;
                        $('namespan').innerHTML = txt;
                    }else{
                        $('namespan').innerHTML = "系统故障，请稍后重试";
                    }
                }else{
                    $('namespan').innerHTML = "正在验证...";
                }
            }
        }

3)服务器端处理请求

4）监听器中，处理服务器返回的响应数据

 

但是我们平时更多时候是使用jQuery实现ajax请求。jQuery实现下更加简洁

 

function checkName2(){

$.ajax({
    type:"post",
    url:"UpLoad",
    data:par,
    dataType:"text",
    success:function(data){
                 console.log(data);
            },
    error:function(data){
                  alert("系统错误请联系管理员");
            }    
    }); 
}

 

 

文件上传功能的ajax也可以实现 需要用到formData对象

function AjaxForm(){
        var formData = new FormData($( "#form1" )[0]);
             $.ajax({
                type:"post",
                url:"AjaxForm",
                data:formData,
                dataType:"text",
                async: false,  
                cache: false,  
                contentType: false,  
                processData: false,  
                success:function(data){
　　　　　　　　　　　　alert（data）；
                },
                error:function(data){
                　　　　alert("系统错误请联系管理员");
                }
                
            }); 
    }