ajax 原理

什么是Ajax?
AJAX 英文是”Asynchronous JavaScript And XML”,它是一种创建交互网页应用的开发技术.
通过在后台与服务器进行频繁而少量数据的交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，更新网页的某个部分。对于不使用AJAX的传统网页，如果需要更新内容，必须重载整个网页。

为什么需要Ajax?
Ajx不是一种新的编程语言,而是一种用于创建更好的以及交互性更强的Web应用程序的技术.
Ajax是一种独立于Web服务器软件的浏览器技术.
Ajax的工作原理如图所示,它使用JavaScript通过AJAX引擎向服务器发出请求并处理相应来布局更新也而不阻塞用户.AJAX引擎核心对象为XMLHTTPRequest,通过该对象,JavaScript可以在不重新加载整个页面的情况与Web服务器交换数据.
这里写图片描述
AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
AJAX 可使因特网应用程序更小、更快以及更加友好。从而更完善了因特网应用程序。

什么叫异步?
当前页面发送一个请求给服务器,当前页面不需要等待服务器才能操作页面.发送请求后之后,当前页面可以继续浏览,操作.

什么叫局部刷新?
可以用两种方式部分刷新
1.iframe页面重载的方式.
这种方式虽然实现了部分刷新,但是页面的重载,所以也会来性能上的问题.

//第一步:在页面定义一个iframe
<iframe id="indexFrame" name="index" width="1000" height="800" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="margin-top:100px;"></iframe>

//第二步:设置iframe的src
var indexFrame = document.getElementById("indexFrame");
indexFrame.src="introduction.php";

//第三步,添加一个button的点击事件,当点击这个button,重新设置iframe的src,实现iframe里面的页面刷新.Iframe外面的内容不刷新

<button id="room" onclick='IndexClick("room")'>Click Me</button>

function indexClick(moduleKey){
    var indexFrame = document.getElementById("indexFrame");
    if(indexFrame == null){
        indexFrame = parent.document.getElementById("indexFrame");
    }

    var url = "introduction.php";
    switch(moduleKey){
        case "introduction";
            url = "introduction.php";
            break;
        case "room";
            url = "room.php";
            break;
        default:{
        }
    }
    indexFrame.src = url;
}

Ajax j技术的组成
1, JavaScript
2, XMLHttpRequest
AJAX的核心是JavaScript对象XMLHttpRequest。XMLHttpRequest对象用于在后台与服务器进行异步通信，通过HTTP传递请求和响应数据
3, XML
4, DOM
DOM是文档对象模型（Document Object Model）的英文字首缩写，它定义了操作文档对象的接口。
5, CSS

Ajax的通信

创建XMLHttpRequest对象
初始化请求参数
发送请求
捕获请求状态
判断请求状态
readyState属性值表示HTTP 请求的当前状态，在事件处理程序中一般根据该值进行不同处理。当XMLHttpRequest对象初次创建时，该属性值从0开始，直到接收到完整的HTTP响应，该属性值递增至4。
判断请求请求结果
获取响应文本
响应XML

Ajax提交请求和服务响应的原理
客户端的代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="Ajax.js"></script>

</head>
<body>
    <div id="Test" style="background-color:#40eeee">
        您的姓名2：<input type="text" id="testGetName" size="20" />
        <button type="button" onclick="testGet();">Ajax Get请求</button>
    </div>

    <div id="Test" style="background-color:#ff6a00">
        您的姓名3：<input type="text" id="testPostName" size="20" />
        <button type="button" onclick="testPost();">Ajax Post请求</button>
    </div>

    <div id="myDiv" />

</body>
</html>

客户端JS代码:

var xmlhttp = createRequest();

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

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

}

function createRequest() {
    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");
    }
    return xmlhttp
}

function callback() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}

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

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

AJAX GET和POST方式不同

扫描二维码关注公众号，回复： 160573 查看本文章

//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);

}

请求的URL中,POST方式可以添加键值对,也可以不添加
GET方式中，send方法传递值无效。对于IE浏览器可以忽略send()方法的参数。但是对于FireFox，必须提供一个null引用，否则回调行为将不规律。这是在编写客户端脚本时你会发现的一个跨浏览器兼容的问题。
POST可以用send方法发送额外信息.发送的信息存放在content中
Post方式需要制定Request Header的类型.Get方式不需要指定
GET方式将参数暴露在URL中,POST不暴露.

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

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

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

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

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

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

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

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

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

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

应用场景
1. 对数据进行过滤和操纵相关数据的场景
2. 添加/书节点
3. 添加/删除列表中的某一行记录
4. 切换下拉列表
5. 注册用户重名的校验

猜你喜欢