当我们使用ajax时究竟发生了什么

0

你的探险使得NEM连接服务器和检索数据有关。或者如果连接活着，它会使用活着的连接。

来源

2010-02-27 10:52:11 oneat

5

浏览器就HTTP在后台线程调用，并使用JavaScript来修改DOM的结果返回时。这可以防止您刷新整个页面，并可以随意修改其中的部分。

退房在wikipedia定义以获取更多信息。

如果你在asp.net应用程序的Page_Load阿贾克斯将被要求您请求的页面，就像一个正常的通话。这是不同的浏览器中的呈现。 ¨ 重要概念：背景调用和脚本。

来源

2010-02-27 10:54:16

1

使用JavaScript，可以拨打网页。此外，使用JavaScript，可以用新的东西替换页面的内容（通过操作DOM）。

所以，Ajax（异步JavaScript）是结合这两种技术的过程。你访问某个页面（通常是你自己的服务器上的一个页面），获取它的结果，然后获取这些数据，并用它做一些事情（以某种方式更改页面）。

这是核心思想。

来源

2010-02-27 10:54:52

2

Ajax是一个简单的Javascript代码。并且页面没有被自己刷新，你需要刷新它 - 当你认为有必要的时候（我们通常根据请求返回后你的服务器的结果）。

是的，它会打开从浏览器到ASP页面的后台连接。当你完成后 - 你可以只更新页面中的一个DOM对象。

这是干什么用的？我们为什么用它？以facebook为例，当你关闭通知，忽略，批准，评论你的朋友的想法 - 你不刷新页面 - 你（作为开发人员）可以改变客户端的属性（在DB中为前/后）让他知道。

加上，只需刷新页面（这对客户端非常恼人），您可以完成以上所有操作，并且您总是必须对所有需要传递给每个新文档的参数进行讨论。

ajax方式可以让你做出一个动作，而无需移动到任何地方。作为开发人员使用它非常舒适，客户更喜欢它。

有JS框架，使它非常简单。例如：（这个例子是一个jQuery例子..）

function call_my_page() { 
    $.post("/get_list.asp", { 
     param1: "a", 
     param2: "b" 
    }, function (server_response) { 
     alert(server_response); 

     if (server_response == 1) {  window.location.refresh;  } 
    } 
} 

call_my_page();

的get_list.php - 这是将要发布的服务器上的文件（$。员额）

参数1，参数2 - 它会影响你传递给你的服务器。

，如果你的服务器的页面文件返回答案，“1” 那么 - 你的页面将被刷新。（或仅一个DIV/SPAN/TABLE将用一个新的HTML取代）

jQuery的。是最好的。

来源

2010-02-27 11:17:36

1

转到任何SO post与超过几个评论，你会看到一个链接，说明类似显示99更多意见下面。现在，如果点击它，您可以看到上述99条评论是在一两秒内加载的，而其余页面则保持不受干扰。这是因为'页面没有被刷新' - 如果页面被刷新，则需要更长的时间，因为这意味着重新加载整个html内容。

而是重新发送整个html页面（包括在同一个线程的其他职位）的，服务器只发送请求的数据（只是那些99层的意见在我们的例子）。

可能性非常大。服务器可以返回任何数据 - HTML或文本或XML或JSON或其他。您可以使用javascript显示接收到的数据。

服务器端代码处理AJAX请求它处理一个正常的http请求的相同的方式（可以虽然覆盖此使用HTTP_X_REQUESTED_WITH头）。

来源

2010-02-27 11:17:52 Amarghosh

4

为了解释AJAX你必须了解非AJAX的方式，看到了差距，所以我会给传统形式邮寄方式和AJAX方式相同的例子。

你必须要能够添加任何数量的电话号码的客户的电话号码列表的情况下，每个记录有两个字段，类型和数量。类型是一个描述，例如移动家庭工作。

传统

用户查看电话号码的列表，最后一个是空的，可编辑的。他们想要添加一个电话号码，以便填写空白字段并单击添加按钮。表单被提交，因此数据被封装在一个http文件中并发送到服务器，服务器代码将电话记录添加到数据库并开始构建新页面的html，以便以htm，head，所有的脚本都包含，然后包含新行的数据包含新的电话号码和另一个空字段。

请求

POST /addPhoneNumberForm Http 1.1 
HOST:www.host.com 
USER-AGENT:... 
... 
newPhoneType=Home&newPhoneNumber=00649123456

响应

<DOCTYPE ....> 
<html> 
    <head> 
     <title="..."> 
     <link type="text/css" href="standard.css" /> 
     <script type="text/javascript" src="jQuery1.4.js"></script> 
     ... 
    </head> 
    <body> 
     <div id="headerAndNav"> 
     .... 
     </div> 
     <div id="content"> 
      .... 
      <table id="addPhoneRecords" class="dataentry"> 
       <tr><th>Description</th><th>Number</th></tr> 
       <tr><td>Mobile</td><td>0044987654331</td></tr> 
       <tr><td>Work</td><td>0044987654332</td></tr> 
       <tr><td>Holiday</td><td>0044987654333</td></tr> 
       <!-- Newly Added --> 
       <tr><td>Home</td><td>00649123456</td></tr> 
       <tr><td><input type=text .../></td><td><input type=text .../></td></tr> 
      </table> 
      .... 
     </div> 
     <div id="footer"> 
     ... 
     </div> 
    </body> 
</html>

一旦用户浏览器收到该响应它扔掉所有的用户可以看到其替换成白色，空白屏幕。并开始解析接收到的html作为一个全新的页面。任何图像/ Css/Javascript文件必须重新获取（或者至少检查缓存是否有效）。任何JavaScript文件都必须运行，并且所有伴随的DOM事件都需要文件（document.onLoad等）。

所以现在的情况是用户提交的数据和服务器已经回答了全新的一页。在服务器和客户端上执行大量网络活动和时间以及cpu周期的成本是他们必须生成的，并且需要解析完整的html页面。

的AJAX方法

用户查看电话号码的列表，最后一个是空的，可编辑的。他们想要添加一个电话号码，以便填写空白字段并单击添加按钮。这一点和传统一样，从现在开始就有所不同。当用户单击按钮而不是提交表单时，JavaScript从表单收集相关信息并使用XMLHttpRequest向服务器发出AJAX请求，这会发送类似于表单发布的请求，但返回结果作为一个JavaScript字符串而不是网页。

请求

POST /addPhoneNumberAJAX Http 1.1 
HOST:www.host.com 
USER-AGENT:... 
... 
newPhoneType=Home&newPhoneNumber=00649123456&ajax=true&type=json

有大量的什么样的服务器能够返回选择我选择一个例子响应

{phoneType:"home",phoneNumber:"00649123456"};

这是JavaScript对象符号（ JSON）并表示具有phoneType和phoneNumber两种类型的对象。一旦收到此信息，JavaScript就会动态地向现有表添加新行。 JavaScript会看起来像这样。

addPhoneViaAjax(type, number, reqObj, xmlhttp){ 
    // Construct url and declare parameters for our request 
    xmlhttp.open("POST","addPhoneNumberAJAX?newPhoneType="+type ...,false); 
    // Send the request and wait for the response 
    xmlhttp.send(null); 
    // For example assume response successful 
    // Get the response as text 
    var responseStr = xmlhttp.responseText; 
    // Convert the response to object, preferably using one of the JSON parsing libaries 
    var responseObj = eval(responseStr); // Please use one of the JSON parsing libaries look at Jquery.forms plugin 
    // Use jquery javascript libary to update the table in place. 
    // by finding the last row of the table and instering html before it. 
    jQuery("table#addPhoneRecords tr:last-child").before(
     "<tr><td>" + responseObj.phoneType + 
     "</td><td>" + responseObj.phoneNumber + 
     "</td></tr>"); 
}

摘要因此，与传统方法的浏览器认为该反应了一个全新的页面和必须做得出一个新的页面所需的一切。使用ajax方法，浏览器保持在同一页面上，并使用JavaScript来更改页面的一小部分。

来源

2010-02-27 11:43:46

当我们使用ajax时究竟发生了什么

回答

相关问题