专栏首页Web前端开发Ajax 的简介与使用

Ajax 的简介与使用

一、什么是Ajax

Ajax 的全称是 Asynchronous JavaScript and XML(即异步的 JavaScript 和 XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术

二、Ajax的优缺点

1、优点:

  • 通过异步模式,提升了用户体验
  • 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
  • Ajax 引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载

2、缺点

  • 不支持浏览器back按钮
  • 安全问题,Ajax 暴露了与服务器交互的细节
  • 对搜索引擎的支持比较弱

三、Ajax 的使用 -- 实现步骤

1、创建 XMLHttpRequest 对象,即创建一个异步调用对象

var XHR;
if(window.XMLHttpRequest){
  XHR=new XMLHttpRequest();                   //IE7+, Firefox, Chrome, Opera, Safari...
}else{
  XHR=new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5

2、创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

XHR.open(method,url,async);
// method:请求类型,GET 或 POST---------可选
// url:文件在服务器上的位置--------------必要参数
// async:true(异步)或 false(同步)----可选
// 以上参数使用时均要加上“”

3、设置响应 HTTP 请求状态变化的函数

XHR.onreadystatechange = function () {
    //异步调用成功
    if (XHR.readyState === 4) {
        if ((XHR.status >= 200 && XHR.status < 300) || XHR.status === 304) {
            //获得服务器返回的数据
            data = JSON.parse(XHR.responseText);
            // 渲染数据
            renderDataToDom();
        } else {
            console.log('unsuccess');
        }
    }
};

4、发送 HTTP 请求

request.send();

5、获取异步调用返回的数据 (JSON

6、使用 JavaScript 和 DOM 实现局部刷新

四、Ajax中的一些处理总结

1、服务器响应处理

  • responseText:获得字符串形式的响应数据
  • responseXML:获得XML 形式的响应数据

2、同步处理

XHR.open("GET","demo_get.html",false);
XHR.send();    // 直接在 send() 后面处理返回来的数据
document.getElementById("target").innerHTML=XHR.responseText;

3、异步处理

异步处理相对比较麻烦,要在请求状态改变事件中处理

XHR.onreadystatechange=function(){     //接收到服务端响应时触发
    if(XHR.readyState==4&&XHR.status==200){
        document.getElementById("target").innerHTML=XHR.responseText;
    }
}

下面是 XMLHttpRequest 对象的三个重要的属性

  • onreadystatechange:存储函数,每当 readyState 属性改变时,就会调用该函数
  • readyState:存有 XMLHttpRequest 的状态

0:请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4:请求已完成,且响应已就绪

  • XHR.status:表示响应状态码。比较常见的有:

200:“OK”(当 readyState 等于 4 且状态为 200 时,表示响应已就绪) 304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意) 403:(禁止) 服务器拒绝请求 404:(未找到) 服务器找不到请求的网页 408:(请求超时) 服务器等候请求时发生超时 500:(服务器内部错误) 服务器遇到错误,无法完成请求

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JQuery基础概念知识

    (本文年代久远,请谨慎阅读)JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(I...

    ZONGLYN
  • 使用开源库构建自定义视频体验

    本帖来自VES(Video Engineering Summit)2019的演讲,主要内容是使用开源库构建自定义视频体验(Building A Custom V...

    用户1324186
  • 七夕将至,我用代码写了一个表白神器!

    七夕节马上就要到了,又到了各位单身汪报复社会的时间了。今年的七夕节,各位单身汪们你们准备好了吗?把电影院的单号座位都订完?晚上去宾馆敲门?用针扎TT?这些老掉牙...

    蓝默空间
  • 正则表达式-零宽断言实践

    处理JSON字符串KEY值中的特殊字符,VALUE中的字符不受影响。 如下所示,替换KEY中的_DOT_为点.,_SUB_为_。

    用户2146693
  • Spring Boot集成CKEditor 顶

    项目中需要用到富文本编辑器,朋友推荐用CKEditor。CKEditor可以和Spring mvc很好的集成。CKEditor与CKFinder学习–整合Spr...

    用户2146693
  • select标签添加onclick()事件的兼容写法

    以上代码片是可以在Firefox和IE9下运行的,但是它在我的360浏览器上就是无效的,究其原因还是IE版本的问题(存在兼容性问题), 也就是:老版本只能这样 ...

    ZONGLYN
  • 《Python入门04》Python字符串的那些“事儿”

    前几天收到小伙伴的留言,说你写的python相关教程意义不大,还不如专门整理《NLP》相关文章供大家参考学习,还有小伙伴说你的python入门怎么不更新...

    ShuYini
  • 基础服务系列-Centos7 安装Node.js10

    wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz

    用户2146693
  • 添加轻量的RSS订阅内容阅读展示支持

    大部分资讯类的网站都提供RSS订阅功能,其一般是是XML格式的网页信息,目的是为了能够方便第三方站点轻松的获取本站的最新内容,在Hexo博客中一般也会包含see...

    ZONGLYN
  • 前端快速入门之概述

    以下是对(前端)可视化工作的并不系统的总结,新手向,主要是想说一下前端如何组成、功能如何实现、资源如何请求,进而说到数据如何显示,并在最后列举了一些十分重要的参...

    ZONGLYN

扫码关注云+社区

领取腾讯云代金券