Several ways to implement Ajax through XMLHttpRequest and jquery _jquery

Example one: Using AJAX to dynamically acquire time.

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 generic handler to process the foreground request and return to the current time of the system:

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; Initializes the XMLHttpRequest object if (window).
  XMLHttpRequest) {//Firefox XMLHttpRequest object creation in modern browsers HttpRequest = new XMLHttpRequest (); else if (window.
  ActiveXObject) {//IE XMLHttpRequest object creation HttpRequest = new ActiveXObject ("Microsoft.XMLHTTP"); } if (!httprequest) {alert ("Create HttpRequest object exception!)
  ");
  } httprequest.open ("POST", "Handler.ashx", true); HttpRequest sends a POST request to handler, the last parameter is set to be asynchronous, true is asynchronous, false is synchronous httprequest.onreadystatechange = function () {//Specify ONR
        The Eadystatechange event handle corresponds to the function if (httprequest.readystate = = 4) {//4 returns complete if (Httprequest.status = = 200) on behalf of the server {
        200 The delegates succeeded document.getElementById ("Text1"). Value = Httprequest.responsetext; ResponseText represents the text returned by the server, and another way is responsexml to get the server-returned XML} else {alert ("Ajax server returns an error!").
      ");
  }} httprequest.send (); This is where the real request is sent to the server. 

We use jquery to the foreground JS code will become very concise:

The JS code written based on jquery:

Note: The HTML code should remove the button's OnClick event because we used the event binding directly 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 and not simple" ...

The $.ajax in jquery sets up the Get, post method, and the default is get.

If you use post 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 two:

First, XMLHttpRequest implementation to obtain data

Do not use jquery to achieve the page does not refresh the way to get content, we use XMLHttpRequest native code to achieve;

The JS code is as follows:

1. Get a node and add oncilck response function
document.getelementsbytagname ("a") [0].onclick = function () {
//3, Create a XMLHttpRequest ();
  var request = new XMLHttpRequest ();
  4, ready to send the requested data URL
  var url = this.href;
  var method = ' Get ';
  5, invoke the XMLHttpRequest object's Open method
  Request.open (method,url);
  6, call the XMLHttpRequest object's Send method
  request.send (null);
  7, add onreadystatechange response function for XMLHttpRequest objects
  Request.onreadystatechange = function () {
    //8, To determine whether the response is complete: the ReadyState property value of the XMLHttpRequest object is 4
    if (request.readystate = 4) {
       //9, In determining if the response is available: XMLHttpRequest Object Status Property value of
      Request.status = {
           //10, response result
           alert ( Request.responsetext);    
      }} 2, cancel the amount of a node default behavior return
      false;    
}

Insert HTML code:

<a href = "Hello.txt" > click to get text content </a>

Second, jquery to achieve AJAX access to information

This example is dynamic to get data from the background to change the content of the Drop-down button;

The JS code is as follows:

function BindCarteam0 () {
     //Request data
     var url via 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>

Where type types have get and post two kinds;

Post can transmit a large amount of data, get a byte limit;