Question

我没有得到当我们使用ajax时究竟发生了什么。每次都没有得到刷新意味着什么？它与page_load方法或什么

有关

Answer 1

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

查看wikipedia的定义以获取更多信息。

如果你在asp.net应用程序中执行ajax，将会为你请求的页面调用page_load，就像正常调用一样。这是浏览器中的渲染，它是不同的。 ¨ 关键概念：后台调用和脚本。

Answer 2

为了解释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>  <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作为一个全新的页面。必须重新获取任何Images / 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来改变页面的一小部分。

Answer 3

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

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

它的用途是什么？我们为什么用它？以facebook为例，当您解除通知，忽略，批准，评论您的朋友的想法时 - 您不刷新页面 - 您（作为开发人员）可以更改客户端的属性（在DB中为ex）with / out让他知道。

另外，你可以通过刷新页面来完成上述所有操作（这对客户来说非常烦人），而且你总是要担心需要传递给每个新文档的所有args。

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 - 这是您的服务器上将发布的文件（$ .post）

param1，param2 - 你传递给服务器的vars。

如果服务器的页面文件返回答案“1” 然后 - 您的页面将被刷新。（或只有DIV / SPAN / TABLE将替换为新的HTML）

jQuery的。是最好的。

Answer 4

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

因此，Ajax（异步JavaScript）是将这两种技术结合起来的过程。您访问某个页面（通常是您自己的服务器上的一个页面），获取它的结果，然后获取该数据，并对其执行某些操作（以某种方式更改页面）。

这是核心理念。

Answer 5

转到包含多条评论的任何SO post，您会在下方看到一条链接，其中包含显示99条评论之类的内容。现在，如果你单击它，你可以看到所述99条评论是在一两秒钟内加载的，而剩下的页面则保持不受干扰。这是因为'页面没有刷新' - 如果刷新页面会花费更长的时间，因为它意味着重新加载整个html内容。

服务器不会重新发送整个html页面（包括同一个线程中的其他帖子），而只发送请求的数据（在我们的示例中只是那些99条评论）。

可能性巨大。服务器可以返回任何数据 - html或文本或xml或json或其他任何数据。您可以使用javascript显示收到的数据。

服务器端代码处理AJAX请求的方式与处理普通http请求的方式相同（您可以使用HTTP_X_REQUESTED_WITH标头覆盖它）。

Answer 6

您的资源管理器与服务器建立了一个nem连接并检索数据。或者如果连接保持活着，则使用活动连接。

当我们使用ajax时会发生什么

6 个答案: