AJAX简述

Posted 2020-11-27 居诸小筑

1.概述

异步的js和xml

可以通过AJAX实现异步访问服务器，并局部刷新网页

2.同步交互与异步交互

• 同步（串行）
  向服务器发送一个请求，必须等待响应结束，才能发起第二个请求，
  在服务器处理期间，浏览器不能干别的事。
  通常会刷新整个页面。
• 异步（交替）
  向服务器发送一个请求，无须等待响应结束，就能发起第二个请求，
  在服务器处理期间，浏览器可以干别的事。
  通常会刷新局部页面

3.应用场景

百度搜索框
用户名检验
。。。

4.优缺点

• 优点：
  异步交互，提高了用户的体验。
  服务器只响应了部分数据，而不是整个页面，所以降低了服务器的压力。
• 缺点：
  AJAX不适用所有场景，比如页面跳转。
  AJAX会增加服务器压力，因为可能会无端增加访问服务器的次数

5.javascript实现AJAX

第一步--获取XMLHttpRequest对象

var xmlHttp = ajaxFunction();
function ajaxFunction(){
    var xmlHttp;
    try{
//现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象
        xmlHttp = new XMLHttpRequest();
    }catch(e){
        try{
            //IE6.0
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                //IE5.0及更早版本
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                alert("...");
                throw e;
            }
        }
    }
    return xmlHttp;
}

第二步--打开与服务器的连接

xmlHttp.open(method, url, async);

• method: 请求方式, 可以是GET或POST
• url: 所要访问的服务器中资源的路径如:/servlet/AServlet
• async: 是否为异步传输, true 表示为异步。传输一般都是true。

第三步--发送请求

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//通知服务器发送的数据是请求参数 
xmlHttp.send("xxxx"); //注意, 如果不给参数可能会造成部分浏览器无法发送请求
xmlHttp.send("username="+username+"&psw="+)

参数:

如果是GET请求, 可以是null, 因为GET提交参数会拼接在url后面。
如果是POST请求, 传入的就是请求参数，如："username=张飞&psw=123"

第四步--注册监听

在XMLHttpRequest对象的一个事件上注册监听器:onreadystatechange
一共有五个状态:(xmlHttp.readyState)

• 0状态：表示刚创建XMLHttpRequest对象, 还未调用open()方法。
• 1状态：表示刚调用open()方法, 但是还没有调用send()方法发送请求。
• 2状态：调用完了send()方法了, 请求已经开始。
• 3状态：服务器已经开始响应, 但是不代表响应结束。
• 4状态：服务器响应结束!(通常我们只关心这个状态)

获取xmlHttp对象的状态:
var state = xmlHttp.readyState;//可能得到0, 1, 2, 3, 4

获取服务器响应的状态码:
var status = xmlHttp.status;

获取服务器响应的内容

var data = xmlHttp.responseText;//得到服务器响应的文本格式的数据
// readyState0 --> 1

/* 注册监听, 时刻监听服务器处理请求的状态 */
xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4){
        //状态为4表示服务器已经处理完成, 但是不代表处理成功
        if(xmlHttp.status == 200){//当状态码为200, 表示服务器成功的处理了请求
            var result = xmlHttp.responseText();
            //xxx
        }
    }
}

6.jQuery实现AJAX

$ .get() 或 $ .post()

$.get(url,[data],[callback])

• url:发送请求的url地址
• data:可选，向服务器发送的数据，需要json格式
• callback：可选，回调函数，即请求成功后执行的函数

load()

$(selector).load(url,[data],[callback])

• $(selector)：选择器，可以选中某个元素，并将服务器的返回值填充到这个元素中
• url：发送请求的url地址
• data：可选，向服务器发送的数据，需要json格式
• callback：可选，回调函数，即请求成功后执行的函数

ajax()

$.ajax(url,[data],[async],[type],[success])

• url：发送请求的url地址
• data：可选，向服务器发送的数据，需要json格式
• async：可选，默认是true，表示异步，false为同步
• type：可选，请求方式
• success：可选，回调函数，即请求成功后执行的函数