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

BWH_Steven

发布于 2019-09-29 15:44:46

4270

发布于 2019-09-29 15:44:46

文章被收录于专栏：理想二旬不止理想二旬不止

基本概念

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"
});