001-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:响应结果的类型?

结尾:

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

如果能帮到你的话,那就来关注我吧!如果您更喜欢微信文章的阅读方式,可以关注我的公众号

在这里的我们素不相识,却都在为了自己的梦而努力 ❤

一个坚持推送原创Java技术的公众号:理想二旬不止


   转载规则


《001-Ajax》 BWH_Steven 采用 知识共享署名 4.0 国际许可协议 进行许可。
  目录