Ajax详解

Ajax详解

　　　　

Ajax工作原理：

Ajax的全称是：Asynchrnous JavaScript and XML，其中asynchronous是异步的意思，它与传统的web开发中采用的同步不一样

关于同步和异步：

异步是面向字符串的传输，它的单位是字符串；而同步是面向比特的传输，它的单位是帧，他在传输的时候要求接收方的时钟保持一致。

Ajax所包含的技术：

1、使用CSS和XHTML来表示

2、使用DOM模型来交互和动态显示

3、使用XMLHttpRequest来 和服务器进行异步通信

4、使用JavaScript来绑定和调用

Ajax的原理和XMLHttpRequest对象

xmlHttpRequest是ajax的核心技术，它是IE5中首先引入的，是一种支持异步请求的技术

XmlHttpRequest的属性：

Onreadystatechange：每次状态改变所触发事件的事件处理程序

ResponseText：从服务器进程返回数据的字符串形式

ResponseXML：从服务器进程返回DOM兼容的文档对象

Status：从服务器返回的数字代码，如404（未找到）200（已就绪）

Status Text：伴随状态码的字符串信息

Readystate：对象状态值

0（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）

1（初始化）对象已建立，尚未调用send方法

2（发送数据）send方法以调用，但是当前的状态及HTTP头未知

3（数据传送中）已接收部分数据，因为响应及HTTP头不全，这是通过responseBody和responseText获取部分数据会出错误

4（完成）数据接收完毕，这是可以通过responseXML和responseText获取完整的回应数据

但是各个浏览器之间存在差异，所以创建XMLHttpResponse对象需要不同的方法，这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。

function createxmlhttp() {
        if (Window.XmlHttpRequest) {
            //非IE浏览器创创建xmlhttprequest对象
            xmlhttp = new XMLHttpRequest();
        }
        if (Window.ActiveXObject) {
            //IE浏览器创建xmlhttprequest对象
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
        }
    }
    function Ustbwuyi() {
        var data = document.getElementById("username").value;
        createxmlhttp();
        if (!xmlhttp) {
            alter("创建xmlhttp对象异常！");
            return false;
        }
//POST:向服务器提交的数据类型，POST还是get，URL:请求的地址和传递的参数；传输方式：false为同步，true为异步，默认为true
        xmlhttp.open("POST", url, false);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                document.getElementById("user1").innerHTML = "数据正在加载.....";
                if (xmlhttp.status == 200) {
                    document.write(xmlhttp.responseText);
                }
            }
        }
        xmlhttp.send();
}

Ajax的优缺点

优点：

1、最大的一点就是页面无刷新，在页面与服务器通讯，给用户很好的体验

2、使用异步的方式与服务器通讯，不会打断用户的操作，具有更加迅速的响应能力

3、可以最大程度的减少冗余请求和响应对服务器造成的负担

4、不需要下载插件或小程序

缺点：

1、ajax干掉的back按钮，对浏览器的后腿机制造成破坏

2、安全问题：跨站点脚本攻击，SQL注入

3、对搜索引擎的支持较弱

4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的

5、违背了url和资源定位的初衷

 

Ajax可以用来验证用户名是否注册

 

采用两种方式

1 ajax.dll

2 自己写xmlhttprequest对象

ajax中常见到的一些错误

 1 配置的问题

在pageload里面配置该页面的时候