AJAX简述

Posted 居诸小筑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX简述相关的知识,希望对你有一定的参考价值。

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:可选,回调函数,即请求成功后执行的函数
















以上是关于AJAX简述的主要内容,如果未能解决你的问题,请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

[每日一题] 简述 AJAX 的原理

Javascript代码片段在drupal中不起作用

简述 AJAX 及基本步骤

简述ajax和axiosfetch的区别

你真正的了解Ajax?Ajax技术简述