30分钟全面解析-图解AJAX原理

阅读目录

回到顶部

先上原理图:

高清无码图在这里：点我查看大图！！！

回到顶部

背景：

1.传统的Web网站，提交表单，需要重新加载整个页面。

2.如果服务器长时间未能返回Response，则客户端将会无响应，用户体验很差。

3.服务端返回Response后，浏览器需要加载整个页面，对浏览器的负担也是很大的。

4.浏览器提交表单后，发送的数据量大，造成网络的性能问题。

回到顶部

问题：

1.如何改进？

2.AJAX是什么？

3.有什么优势？

4.有什么缺点？

回到顶部

一、什么是 AJAX

1.为什么需要AJAX

当需要从服务器获取数据，并刷新页面的操作，如果不采用AJAX，则需要用提交整个表单的方式，当提交表单时，发送请求给服务器，页面需要等待服务器发送完response后，页面才能恢复操作。

2.AJAX的概念：

1.AJAX = 异步 JavaScript 和 XML。

2.AJAX 是一种用于创建快速动态网页的技术。

3.通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。

4.可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

3.什么叫异步

当前页面发送一个请求给服务器，当前页面不需要等待服务器响应才能操作网页。发送完请求之后，当前页面可以继续浏览，操作。

4.什么叫局部刷新

我们可以用两种方式来实现部分刷新。

1. iframe页面重载的方式。

这种方式虽然实现了部分刷新，但是是页面的重载，所以也会带来性能上的问题。

Step1.在页面中定义一个Iframe

<iframe id="indexFrame" name="index" width="1000" height="800"
                frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="margin-top:100px;"></iframe>

Step2.设置Iframe的src

var indexFrame = document.getElementById("indexFrame");
indexFrame.src = "introduction.php";

Step3.添加一个button的点击事件，当点击这个button时，重新设置Iframe的src，实现iframe里面的页面刷新。Iframe外面的内容不刷新。

通过这种方式我们可以实现一个导航栏的功能：

　　2.AJAX方式

　　　　Step1.JavaScrpit发送异步请求

　　　　Step2.服务端查询数据库，返回数据

　　　　Step3.服务端返回Response

　　　　Step4.客户端根据返回的Response，来用JavaScript操作DOM。

　　看下面的例子：

　　当我们切换DropDownList中的Item时，JavaScript发送异步请求给Server端，Server端返回数据，然后JavaScript将数据解析出来，拼接了一个Table，将Table呈现在页面上。

回到顶部

二、提交Form表单的原理

1.代码

客户端代码：

<form id="form1" action="Test.ashx" method="get">
            您的姓名1：<input type="text" name="fname" size="20" />
            <input type="submit" name="submit" value="Sumbit">
 </form>

服务端代码：

public void ProcessRequest (HttpContext context)
{
        //Delay
        for (int i = 0; i < 2; i++)
        {
            System.Threading.Thread.Sleep(1000);
        }
  
         //从Requset.Form中获取fname的值。使用Form获取请求的键值对的值的前提条件是HTTP request Content-Type 值必须是"application/x-www-form-urlencoded" 或 "multipart/form-data".
        string fname = context.Request["fname"];
 
        context.Response.ContentType = "text/plain";
    //将字符串写入 HTTP 响应输出流。
        context.Response.Write("Hello World " + fname);
 }

2.将代码部署到IIS

3.打开站点：

http://localhost:8003/Test.html

4.输入“Jackson0714”然后点击Sumbit按钮，页面会重新刷新，显示"Hello World Jackson0714"

5.提交Form表单后，页面发送请求和服务端返回响应的流程

6.通过抓包，我们可以得到HTTP Headers

浏览器发送HTTP给服务端，采取的协议是HTTP协议。

在传输过程中，我们可以看下HTTP Headers。

回到顶部

三、AJAX提交请求和服务响应的原理

1.代码

客户端HTML代码：

客户端JS代码:

这里有一点需要注意

var xmlhttp = createRequest(); 。

1.让服务端能够操作这个变量，如果定义成局部变量，则服务端返回response时，不能对xmlhttp的属性赋值。回调函数要求request是全局的，才能访问这个变量和它的属性值。

2.定义成全局变量后，可能出现两个请求或多个请求共享同一个请求对象。而这个请求对象只能存放一个回调函数来处理服务器响应。当服务器返回两个请求的Response后，可能会调用后指定的回调函数。所以可能有两个完全不同的服务器响应由同一个回调函数处理，而这可能并不是正确的处理。解决办法是创建两个不同的请求对象。

服务端代码不变。

2.输入“Jackson0714”然后点击Sumbit按钮，页面不会刷新，在最下面显示"Hello World Jackson0714"

5.AJAX发送请求和服务端返回响应的流程

高清无码图在这里：点我查看大图！！！

6.通过抓包，我们可以得到HTTP Headers

浏览器发送HTTP给服务端，采取的协议是HTTP协议。

在传输过程中，我们可以看下HTTP Headers：

7.AJAX GET和POST方式区别

AJAX发送请求和POST发送请求的代码如下：

//GET方式
function testGet() {
    var fname = document.getElementById("testGetName").value;
    xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random() , true);
xmlhttp.onreadystatechange = callback;
    xmlhttp.send(null);
}
  
//POST方式
function testPost() {
    var fname = document.getElementById("testPostName").value;
    xmlhttp.open("POST", "Test.ashx?"  + "&random=" + Math.random() , true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
   xmlhttp.onreadystatechange = callback;
    xmlhttp.send("fname="+fname);
    
}

1.请求的URL中，POST方式可以添加键值对，也可以不添加

2.GET方式中，send方法传递值无效。对于IE浏览器可以忽略send()方法的参数。但是对于FireFox，必须提供一个null引用，否则回调行为将不规律。这是在编写客户端脚本时你会发现的一个跨浏览器兼容的问题。

3.POST 可以用send方法发送额外信息。发送的信息存放在content中

4.Post方式需要指定Request Header的类型。Get方式不需要指定。

5.GET方式将参数暴露在URL中，POST不暴露。

回到顶部

四、XMLHttpRequest 对象的知识

1.XMLHttpRequest 对象的方法

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码。ayncFlag=ture，异步；ayncFlag=false，同步。
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

2.XMLHttpRequest 对象的属性

属性	描述
onreadystatechange	状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，返回数据的文本。
responseXML	服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象。
responseBody	服务器返回的主题（非文本格式）
responseStream	服务器返回的数据流
status	服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）
statusText	服务器返回的状态文本信息，HTTP状态码的相应文本（OK或Not Found（未找到）等等）

回到顶部

五、JQuery实现AJAX

下面的代码实现了当切换DropDownList的item时，触发getWeeklyCalendar方法，用JQuery的类库方法$.ajax来发送AJAX请求。

客户端JQuery代码

function getWeeklyCalendar(name,currentDate,mode){
   $.ajax({
        type:'POST',
        url:'weekProcess.php',data:'func=getWeeklyCalender&name='+name+'&currentDate='+currentDate+'&   mode='+mode,
        success:function(data){
        paintWeeklyCandler(data);
      }
  });
}

后台成功返回Response后，执行paintWeeklyCandler(data)方法

后台PHP代码

<?php<br>    //定义返回的Response的格式为JSON格式
    header('Content-type: text/json');<br>    //引入自定义的数据库连接文件
    include 'dbConfig.php';<br>   //引入自定义的设置session的文件
   include_once 'session.php';
   /*
   * Function requested by Ajax
   */
   if(isset($_POST['func']) && !empty($_POST['func']))
   {
        switch($_POST['func']){
         　case 'getWeeklyCalender':
        　　　  getWeeklyCalender($_POST['name'],$_POST['currentDate'],$_POST['mode']);
       　　 　　break;
    　　　　case 'getWeeklyStatus':
        　　　　getWeeklyStatus($_POST['name'],$_POST['currentDate'],$_POST['mode']);
        　　　　break;
   　　　　case 'getEvents':
        　　　　getEvents($_POST['date'],$_POST['name']);
        　　　　break;
    　　　default:
        　　　　break;
   }
}
   function getWeeklyCalender($name = '',$currentDate = '',$mode = '')
   {
      //逻辑代码<br>　　　 <br>      <br>　　　 //返回JSON格式的Response
      echo json_encode(array('result'=>$DaysOfWeekResultsArray));
   }<br>?>

回到顶部

六、优势

1.使用异步方式与服务器通信，页面不需要重新加载，页面无刷新

2.按需取数据，减少服务器的负担

3.使得Web应用程序更为迅捷地响应用户交互

4.AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行

5.浏览器的内容和服务端代码进行分离。页面的内容全部由JAVAScript来控制，服务端负责逻辑的校验和从数据库中拿数据。

回到顶部

七、缺点

1.安全问题：将服务端的方法暴露出来，黑客可利用这一点进行攻击

2.大量JS代码，容易出错

3.Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等

4.可能破坏浏览器后退按钮的正常行为；

5.一些手持设备（如手机、PAD等）自带的浏览器现在还不能很好的支持Ajax

回到顶部

八、应用场景

1.对数据进行过滤和操纵相关数据的场景

2.添加/删除树节点

3.添加/删除列表中的某一行记录

4.切换下拉列表item

5.注册用户名重名的校验

回到顶部

九、不适用场景

1.整个页面内容的保存

2.导航

什么是Ajax

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax的全称是Asynchronous JavaScript and XML，即异步JavaScript+XML。它并不是新的编程语言，而是几种原有技术的结合体。它由以下几种技术组合而成，包括：

HTML/XHTML——主要的内容表示语言。
CSS——为XHTML提供文本格式定义。
DOM——对已载入的页面进行动态更新。
XML——数据交换格式。
XSLT——将XML转换为XHTML（用CSS修饰样式）。
XMLHttp——用XMLHttpRequest来和服务器进行异步通信，是主要的通信代理。
JavaScript——用来编写Ajax引擎的脚本语言。

实际上，在Ajax解决方案中这些技术都是可用的，不过只有三种是必须的：HTML/XHTML、DOM以及JavaScript。

XMLHttpRequest对象

当需要异步与服务器交换数据时，需要XMLHttpRequest对象来异步交换。XMLHttpRequest对象的主要属性有：

onreadystatechange——每次状态改变所触发事件的事件处理程序。
responseText——从服务器进程返回数据的字符串形式。
responseXML——从服务器进程返回的DOM兼容的文档数据对象。
status——从服务器返回的数字代码，如404（未找到）和200（已就绪）。
status Text——伴随状态码的字符串信息。
readyState——对象状态值。对象状态值有以下几个：
- 0 - (未初始化)还没有调用send()方法
- 1 - (载入)已调用send()方法，正在发送请求
- 2 - (载入完成)send()方法执行完成
- 3 - (交互)正在解析响应内容
- 4 - (完成)响应内容解析完成，可以在客户端调用了

对于readyState的状态值，其中“0”状态是在定义后自动具有的状态值，而对于成功访问的状态（得到信息）我们大多数采用“4”进行判断。

Ajax的核心就是是JavaScript对象XmlHttpRequest，这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

XHR对象由IE5率先引入，在IE5中XHR对象是通过MSXML库中一个ActiveX对象实现的，根据IE版本不同可能会遇到不同版本XHR对象，而IE7+与其它现代浏览器均支持原生的XHR对象，在这些浏览器中我们只需使用XMLHttpRequest构造函数就可以构造XHR对象，因此一个浏览器兼容的创建XHR对象的函数写法大概是这个样子：

1 var xmlhttp;
2 if (window.XMLHttpRequest) {
3   // code for IE7+, Firefox, Chrome, Opera, Safari
4   xmlhttp=new XMLHttpRequest();
5 } else {
6   // code for IE6, IE5
7   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
8 }

XMLHttpRequest对象用法

XMLHttpRequest对象有两个重要方法 open与send。

1 xmlhttp.open("GET","ajax_info.txt",true);
2 xmlhttp.send();

对于open方法，有几点需要注意：

URL是相对于当前页面的路径，也可以似乎用绝对路径。
open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送。
只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。

真正能够向服务器发送请求需要调用send方法，并仅在POST请求可以传入参数，不需要则发送null，在调用send方法之后请求被发往服务器。

请求发往服务器，服务器根据请求生成响应（Response），传回给XHR对象，在收到响应后相应数据会填充到XHR对象的属性，有四个相关属性会被填充：

responseText——从服务器进程返回数据的字符串形式。
responseXML——从服务器进程返回的DOM兼容的文档数据对象。
status——从服务器返回的数字代码，如404（未找到）和200（已就绪）。
status Text——伴随状态码的字符串信息。

在收到响应后第一步是检查响应状态，确保响应是否成功返回（状态为200）。

1 xhr.open('get','default.aspx,false'); //准备同步请求
2 xhr.send();
3 if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
4      //do something
5 }else{
6       //error handler
7 }

上面代码在发送同步请求的时候没问题，只有得到响应后才会执行检查status语句，但是在异步请求时，JavaScript会继续执行，不等生成响应就检查状态码，这样我们不能保证检查状态码语句是在得到响应后执行（实际上也几乎不可能，服务器再快一个HTTP请求也不会快过一条JavaScript执行数度），这时候我们可以检查XHR对象的readyState属性，该属性表示请求/响应过程中的当前活动阶段，每当readyState值改变的时候都会触发一次onreadystatechange事件。

我们可以利用这个事件检查每次readyState变化的值，当为4的时候表示所有数据准备就绪，有一点我们需要注意：必须在open方法之前指定onreadtstatechange事件处理程序。

1 xmlhttp.onreadystatechange=function(){
2   if (xmlhttp.readyState==4 && xmlhttp.status==200){
3     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4     }
5   }
6 xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
7 xmlhttp.send();

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

一个简单的 GET 请求：

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

在上面的例子中，可能得到的是缓存的结果。

为了避免这种情况，向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

如果希望通过 GET 方法发送信息，向 URL 添加信息：

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

open() 方法的 url 参数是服务器上文件的地址：

xmlhttp.open("GET","ajax_test.html",true);

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

异步 - True 或 False？

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.html",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

当使用 async=true 时，规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

posted @ 2016-08-15 13:43 最骚的就是你阅读(846) 评论(0) 编辑收藏举报

刷新页面返回顶部

最骚的就是你

最骚的就是你

30分钟全面解析-图解AJAX原理

先上原理图:

背景：

问题：

一、什么是 AJAX

1.为什么需要AJAX

2.AJAX的概念：

3.什么叫异步

4.什么叫局部刷新

二、提交Form表单的原理

1.代码

5.提交Form表单后，页面发送请求和服务端返回响应的流程

6.通过抓包，我们可以得到HTTP Headers

三、AJAX提交请求和服务响应的原理

2.输入“Jackson0714”然后点击Sumbit按钮，页面不会刷新，在最下面显示"Hello World Jackson0714"

5.AJAX发送请求和服务端返回响应的流程

6.通过抓包，我们可以得到HTTP Headers

7.AJAX GET和POST方式区别

四、XMLHttpRequest 对象的知识

1.XMLHttpRequest 对象的方法

2.XMLHttpRequest 对象的属性

五、JQuery实现AJAX

六、优势

七、缺点

八、应用场景

九、不适用场景

什么是Ajax

XMLHttpRequest对象

XMLHttpRequest对象用法

GET 还是 POST？

异步 - True 或 False？

公告