I read some ajax documents and learned a little bit, so I wrote it and shared it with you. Because I read a little bit of information and may not have a comprehensive view, I added my own tips, if you accidentally write an error, please
Understanding
I. ajax theory description
Ajax is not a new technology. It is only a clever combination of several technologies, allowing them to work collaboratively to achieve asynchronous refresh, in fact, you can interact with the server without refreshing the page. This feature
The XMLHTTP component and XMLHttpRequest object are to be returned.
Asynchronous update principle: send a request with XMLHTTP to obtain the server-side response data. without reloading the entire page, use js to operate Dom to update the page.
Ajax history: Microsoft and IE (IE5, IE6), which were first applied to XMLHTTP, allow developers to use the XMLHTTP Active component to expand their functions on the web page, developers can
You do not need to navigate from the current page to directly transmit data to or obtain data from the server. Mozilla, Konqueror, and Opera respond by creating their own inherited XML proxy class-XMLHttpRequest.
In most cases, the XMLHttpRequest object is similar to the XMLHTTP component (methods and attributes are similar, but some attributes are not supported ).
Ii. Example
PageStartXmlHttpRequestChuanZhi. aspx
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "StartXmlHttpRequestChuanZhi. aspx. cs" Inherits = "XmlHttpRequestTest. StartXmlHttpRequestChuanZhi" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Script language = "javascript">
Var userName;
Var passWord;
Var xmlHttpRequest;
// XmlHttpRequest object
Function createXmlHttpRequest (){
If (window. ActiveXObject) {// if it is IE
Return new ActiveXObject ("Microsoft. XMLHTTP ");
} Else if (window. XMLHttpRequest) {// non-IE browser
Return new XMLHttpRequest ();
}
}
Function onLogin (){
Var url = "http: // localhost: 1638/LoginService. aspx? Username = 123 & password = 456 ";
// 1. Create an XMLHttpRequest component
XmlHttpRequest = createXmlHttpRequest ();
// 2. Set the callback function
XmlHttpRequest. onreadystatechange = HuiDiaoFun;
// 3. initialize XMLHttpRequest
XmlHttpRequest. open ("post", url, true );
// 4. Send the request
XmlHttpRequest. send (null );
}
// Callback function
Function HuiDiaoFun (){
If (xmlHttpRequest. readyState = 4 & xmlHttpRequest. status = 200 ){
Var B = xmlHttpRequest. responseText;
If (B = "true "){
Alert ("Data Request successful! ");
}
Else {
Alert ("data request failed! ");
}
}
}
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Input id = "btnRequest" type = "button" value = "request data" onclick = "onLogin ()"/> </div>
</Form>
</Body>
</Html>
Page LoginService. aspx
Front-end:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "LoginService. aspx. cs" Inherits = "XmlHttpRequestTest. LoginService" %>
Background:
Using System;
Using System. Collections. Generic;
Using System. Linq;
Using System. Web;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Namespace XmlHttpRequestTest
{
Public partial class LoginService: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
String username = Request. QueryString ["username"]. ToString ();
String password = Request. QueryString ["password"]. ToString ();
If (username. Trim () = "123" & password. Trim () = "456 ")
{
Response. Write ("true ");
}
Else
{
Response. Write ("false ");
}
}
}
}
Example: 1. the source code is not described in detail. If you have any questions, you can directly ask Bai and Gu.
2. Of course, only one of the most common ways to interact with the server is listed here. XMLHTTPRequest can also request files such as XML, txt, and ashx.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
