ajax 的简易上手笔记，及交互模型、交互流程及使用代码示范

时间：2020-11-25 21:10:46

AJAX是Asynchronous Javascript And XML（异步JavaScript + XML）。

用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

同步是脚本会停留并等待服务器发送回复然后再继续；异步是脚本允许页面继续其进程并处理可能的回复。同步就是整个页面都刷新，而异步是只刷新用了Ajax技术的部分。

 
AJAX的交互模型：
是Ajax在Browser端引入一个执行引擎，它一边应付user的请求，一边把某些必须交给服务器处理的东西背地里传送给服务器，同时背地里把服务器的结果准备好（接受服务器端的数据），展现给客户的技术模式。这样增强了用户的操作性。
 
AJAX的交互流程：
1、启动，获取XMlHttpRequest对象，这时需要兼容浏览器
2、open，打开url通道，并设置异步传输 
　      open（method，URL，async），method有get或post，URL是请求资源的地址，async表示是否异步请求
         setRequestHeader（header，value）向请求添加http头部
3、send，发送数据到服务器
         send（string），method为post
4、服务器接受数据并处理，处理完成后返回结果
         返回responseText，responseXML形式的数据。一般是responseText
5、客户端接收服务器端返回
        这个阶段有onreadystatechange，readyState，status三个属性
　　  当readyState属性改变时，就会调用onreadystatechange函数
        readyState存有XMLHttpRequest的状态0-4
          0：请求未初始化
          1：服务器连接已建立
          2：请求已接收
          3：请求已处理
          4：请求已完成，且响应已就绪
        status：200ok，404未找到页面
只有当readyState == 4 && status == 200时，表示请求成功
   
 代码示范： 
 1 (function () {
 2             var btn = document.getElementById('test');
 3             btn.onclick = function () {
 4                 ajax('0821-a.txt', function (str) {
 5                     alert(str);
 6                 });
 7             };
 8             function ajax(url, success, fail) {
 9                 var xhr = null;
10                 if(window.XMLHttpRequest) {
11                     xhr = new XMLHttpRequest();
12                 }else {
13                     xhr = new ActiveXObject('Microsoft.XMLHTTP');
14                 }
15                 xhr.open('get', url, true);
16                 xhr.send(null);
17                 xhr.onreadystatechange = function () {
18                     if(xhr.readyState == 4) {
19                         if(xhr.status == 200) {
20                             success(xhr.responseText);
21                         }else {
22                             fail && fail(xhr.status);
23                         }
24                     }
25                 };
26             }
27         })();

 喜欢就点赞吧<(￣︶￣)>

 
标签：

相关文章