ajax入门

ajax背景

• 2005一个人发表了该文章 Ajax ：A new Approach to Web Applacations

• ajax: Asynchronous JavaScript and xml

• 初始是微软在推出IE5时就开始支持ajax的核心技术，但ajax的推行是由chrome完成的

• 使用ajax无需刷新页面即可部分改变页面内容，是浏览器之前需要刷新页面更新数据的变革

ajax包含的技术

1. 使用css和HTML来表示（请求到的数据用html和css展示出来）

2. 使用DOM模型来交互和动态显示（请求到的数据用dom操作处理之后动态展示）

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

4. 使用javascript来绑定和调用

ajax优点

1. 页面无刷新，在页面内与服务器通信，给用户的体验非常好。

2. 使用异步的形式与服务器通信，不需要打断用户的操作，给用户的体验更好。

3. 减轻服务器负担

4. 不需要任何的插件或者小程序

ajax缺点

1. 不支持浏览器的后退机制。(回退后找不到之前的数据)

2. 安全问题，跨站点脚本攻击、sqi注入攻击(比如12306购票网站的最初构建不好，导致各种抢票脚本、抢票软件的出现，简单的几行js代码即可实现后台抢票)

3. 对搜索引擎的支持比较弱（SEO）

4. 不支持手持设备如pad、手机

5. 违背了url和资源定位的初衷（最初一个url对应的页面和资源一定是这样的，但用ajax后同样的url对应的页面和资源就有可能变化，就是因为ajax的异步请求造成的）

Ajax原理和XMLHttpRequest对象

• Ajax的原理简单来说，就是通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

• XMLHttpRequest最核心！！！

• XMLHttpRequest的属性:

  • onreadystatechange　　每次状态改变所触发事件的事件处理程序。

  • responseText　　从服务器进程返回数据的字符串形式。

  • responseXML　　从服务器进程返回的DOM兼容的文档数据对象。

  • status　　从服务器返回的数字代码，比如常见的404 或者200

  • statusText 伴随状态码的字符串信息

  • readyState 对象状态值

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

    • 1（初始化） 对象已经初始化（尚未调用send方法）

    • 2（发送数据）（send方法已经调用）

    • 3（数据传输中）

    • 4（完成）

• XMLHttpRequest的方法：

  • open()　　三个参数

    • 打开方式　　get和post

    • 地址

    • 是否异步 true 代表要使用异步的形式，false代表的是使用同步

ajax封装

//封装好的 Ajax ：打开方式 地址 是否异步 回调函数 提交数据
function Ajax (method,address,flag,callBacks,data) {
    var xhr = null;
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    if (method == 'get') {
        xhr.open('get',address,flag);
        xhr.send();     
    }else if (method == 'post') {
        xhr.open('post',address,flag);
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(data);         
    }
 
    xhr.onreadystatechange = function() {
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                callBacks(xhr.responseText);
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }
 
    }   
}