专栏首页理想二旬不止Ajax 知识入门从这里开始【简约版,后期重新归纳整理】

Ajax 知识入门从这里开始【简约版,后期重新归纳整理】

基本概念

Ajax(Asynchronous JavaScript and XML) 异步的 JavaScript 和 XML

什么是异步呢?

异步同步往往是同时被提到的两个概念,这两者都是基于客户端和服务器端相互通信的基础上

  • 同步:客户端必须的等待服务器端给予的响应,在此期间不能进行其他操作
  • 异步:与同步不同,客户端不需要等待服务器响应,在此期间可以进行任何操作

简单概述流程:

同步:发送请求 → 等待服务器处理 → 返回

异步:事件触发 → 服务器处理 (不等待)→ 处理结束

好处

Ajax 就是一种可以在无需重新加载整个网页的情况下 就可以实现与客户端与服务器的异步通讯

往简单了说就是:不用刷新整个网页,就能修改网页局部内容

在之前的开发中,如果每一次局部的小修改都进行页面刷新,这显然对性能会有所降低,而且用户正在执行的操作也会中断

基本流程

上面图片中基本上所有内容我们都是有一定认识的,只有 XMLHttpRequest 我们似乎是第一次见,那么这又是什么呢?

XMLHttpRequest 是Ajax的核心,是一个非常重要的对象,我们下面的程序中会反复的用到

XMLHttpRequest 基本原理

Ajax中最大的特点 就是请求会被异步对象XMLHttpRequest进行封装,然后再发送到服务器,接着服务器以流的形式将数据返回给浏览器

也正是因为服务器返回的数据是通过流的形式发送的,XMLHttpRequest对象会不停的监听服务器,且得到服务器数据,所以浏览器不需要刷新就可以获取服务器端的数据

基本实现

JS实现方式(了解即可)

1、创建核心对象

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

2、建立连接

xmlhttp.open("GET","ajaxServlet?username=tom",true);
  • 参数1:请求方式(Get、Post)
  • get:请求参数在URL后拼,send方法为空
  • post:请求参数在send方法中写
  • 参数2:URL
  • 参数3:true-异步,false-同步 3、发送请求
xmlhttp.send();

4、获取并处理服务器的响应结果

//方式:xmlhttp.responseText
//时间:响应成功后
//onreadystatechange 对象就绪状态改变

xmlhttp.onreadystatechange=function() {
//判断readyState就绪状态是否为4,判断status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    //获取服务器的响应结果
    var responseText = xmlhttp.responseText;
    alert(responseText);
    }
}

jQuery实现方式

$.ajax({
    url:"ajaxServlet1111" , 
    type:"POST" , 
    data:{"username":"admin","age":20},
    success:function (data) {
        alert(data);
    },
    error:function () {
        alert("出错啦...")
    },

    dataType:"text"
});
  • url:请求路径
  • type:请求方式
  • date:请求参数,上例中等价于,data: "username=admin&age=20"
  • success:响应成功后的回调函数
  • error:果请求响应出现错误,会执行的回调函数
  • dateType:设置接受到的响应数据的格式

发送get请求——$.get()

语法:$.get(url, [data], [callback], [type])

  • url:请求路径
  • data:请求参数
  • callback:回调函数
  • type:响应结果的类型

发送post请求——$.post()

语法:$.post(url, [data], [callback], [type])

  • url:请求路径
  • data:请求参数
  • callback:回调函数
  • type:响应结果的类型

结尾:

如果文章中有什么不足,或者错误的地方,欢迎大家留言分享想法,感谢朋友们的支持!

邮箱:ideal_bwh@163.com

如果能帮到你的话,那就来关注我吧!

如果您更喜欢微信文章的阅读方式,可以关注我的公众号

如果您更加喜欢PC端的阅读方式,可以访问我的个人博客

域名:www.ideal-20.cn

在这里的我们素不相识,却都在为了自己的梦而努力 ❤ 一个坚持推送原创Java技术的公众号:理想二旬不止

本文分享自微信公众号 - 理想二旬不止(ideal-20)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-26

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 虚拟主机能用宝塔服务器管理系统吗?

    虚拟主机能用宝塔吗?不可以的,宝塔面板是一款服务器运维管理面板,云服务器的话可以借助宝塔用来管理维护,而虚拟主机不能。其实也不需要,主要有以下几点:

    用户6191802
  • NATS多种连接Golang实践

    如果因为任何原因断开连接,大多数(如果不是全部)客户端库将重新连接到NATS系统。重新连接逻辑可能因库而异,因此请检查客户端库的文档。

    陌无崖
  • 腾讯面试官是这样问布隆过滤器的

    假设遇到这样一个问题:一个网站有 20 亿 url 存在一个黑名单中,这个黑名单要怎么存?若此时随便输入一个 url,你如何快速判断该 url 是否在这个黑名单...

    用户2769421
  • Linux 的 Crond(二)

    最近由于工作中用到了crond,之前对crond不是很了解,只知道咋用,但是这次需要考虑好多情况,所以又深入了解了一下crond,下面就以下几个问题来谈谈cro...

    lin_zone
  • 如何通过爬虫爬取公众号的活跃度

    这篇文章主要来介绍下如何通过爬虫技术来爬取测试相关公众号的信息,接着通过对爬取的信息进行过滤处理给出测试公众号活跃度的一个列表。这里活跃度会以月发文的数量来进行...

    测试邦
  • loadrunner 脚本开发-url解码

    value = (c >= '0' && c <= '9' ? c - '0' : c - 'a' + 10) * 16;

    授客
  • Jmeter 创建一个web测试计划

    下载地址:http://jmeter.apache.org/download_jmeter.cgi

    授客
  • NATS用Go入门实践

    NATS系统通常由具有nats或tls协议的标准URL标识,例如, NATS://demo.nats.io。NATS系统可以是单个服务器,小型集群或全局超级集群...

    陌无崖
  • CTF从入门到提升(十五)自包含

    1、Phpinfo()包含文件返回临时文件名,我们是在文件上传环节进行包含,如果不删除临时文件我们可以生成临时文件,

    牛油果
  • CanHackMe | CTF平台搭建记录

    在Github上发现了一个开源的CTF平台,界面很好看,而且是php写的,所以决定搭建一下折腾折腾。

    天钧

扫码关注云+社区

领取腾讯云代金券