Using XMLHttpRequest and jQuery to implement ajax, jqueryajaxrequest

Using XMLHttpRequest and jQuery to implement ajax, jqueryajaxrequest

As we all know about AJAX, it is used to achieve asynchronous communication and improve user experience, but with a lot of old knowledge (XML, DOM, JavaScript, HTML, Jquery, Css ......) A new knowledge framework for re-integration. However, XMLHttpRequest objects are among the many objects. This article mainly introduces several methods to implement ajax through XMLHttpRequest and jQuery.

HTML code:

<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default. aspx. cs" Inherits = "_ Default" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
　　
Create a "general handler" to process foreground requests and return the current system time:
Handler. ashx
<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;using System.Linq;using System.Collections.Generic;using System.Text;public class Handler : IHttpHandler {  public void ProcessRequest (HttpContext context) {    context.Response.ContentType = "text/plain";    context.Response.Write(ShowTime());  }  public bool IsReusable {    get {      return false;    }  }  public static string ShowTime()  {    return DateTime.Now.ToString();  }}
　　
Js Code:
Function btnclick () {var httprequest = null; // initialize the XMLHttpRequest object if (window. XMLHttpRequest) {// create httprequest = new XMLHttpRequest ();} else if (window. activeXObject) {// create httprequest = new ActiveXObject ("Microsoft. XMLHTTP ") ;}if (! Httprequest) {alert ("An error occurred while creating the httprequest object! ");} Httprequest. open ("POST", "Handler. ashx ", true); // httprequest sends a post request to handler. The final parameter is to set whether the request is asynchronous. true is asynchronous, and false is synchronous httprequest. onreadystatechange = function () {// specifies the function if (httprequest. readyState = 4) {// 4 indicates that if (httprequest. status = 200) {// 200 indicates that the document is successfully created. getElementById ("text1 "). value = httprequest. responseText; // responsetext indicates the text returned by the server. Another method is responseXML to obtain Take the xml returned by the server} else {alert ("AJAX server returns an error! ") ;}} Httprequest. send (); // requests are actually sent to the server}
　　
We can use jquery to get the front-end js Code very concise:
Js Code compiled based on jquery:
Note: The HTML code should remove the onclick event of the button, because we directly use event binding in js.
$ (Document ). ready (function () {// button1 binding event $ ("# Button1 "). bind ("click", function () {$. ajax ({url: "Handler. ashx ", type:" POST ", success: function (data) {// $ (" # text1 "). val (data); document. getElementById ("text1 "). value = data ;}});});});
　　
I have to say that jquery is "simple but not simple "......
$. Ajax in jquery combines get and post methods. The default value is get.
If POST is used directly, the code is simpler.
$ (Document ). ready (function () {// button1 binding event $ ("# Button1 "). bind ("click", function () {$. post ("Handler. ashx ", function (data) {document. getElementById ("text1 "). value = data ;});});});
　　
Example 2:
I. XMLHttpRequest

If you do not use jQuery to implement the page without refreshing the retrieved content, we use the native code XMLHttpRequest here;
The js Code is as follows:
// 1. obtain node a and add the Oncilck response function document to it. getElementsByTagName ("a") [0]. onclick = function () {// 3. Create an XMLHttpRequest (); var request = new XMLHttpRequest (); // 4. Prepare to send the request url var url = this. href; var method = "GET"; // 5. Call the open method request of the XMLHttpRequest object. open (method, url); // 6. Call the send method request of the XMLHttpRequest object. send (null); // 7. Add the onreadystatechange response function to the XMLHttpRequest object. onreadystatechange = function () {// 8. Determine whether the response is complete. if (request. readyState = 4) {// 9. When determining whether the response is available: the XMLHttpRequest object status attribute value is 200 if (request. status = 200) {// 10. Response result alert (request. responseText) ;}}// 2. Cancel the default action of a node. return false ;}
　　


Insert HTML code:
<A href = "hello.txt"> click to obtain text content </a>
　　


Ii. ajax-based Information Retrieval Using jQuery
This example dynamically retrieves data from the background to change the content of the drop-down button;
The js Code is as follows:
Function bindCarteam0 () {// request data through URL var URL = <select: link page = "/xiaoshouwl. do? Method = getCarteamList "/>;$. ajax ({url: URL, type: 'get', dataType: "json", success: function (html) {var str = "<option value = '-1'> all </option>"; for (var I = 0; I 
　　


The HTML code is as follows:
<Select: select property = "carteam_code" styleId = "carteam_code" style = "width: 150px"> <select: option value = "-1"> all </select: option> </select: select>