Heim > Artikel > Web-Frontend > Mehrere Möglichkeiten zur Implementierung von Ajax über XMLHttpRequest und jQuery_jquery

Mehrere Möglichkeiten zur Implementierung von Ajax über XMLHttpRequest und jQuery_jquery

WBOYOriginal: 2016-05-16 15:41:541038Durchsuche

Beispiel 1: Ein Beispiel für die Verwendung von Ajax, um dynamisch Zeit zu erhalten.

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
  <script type="text/javascript" src="Scripts/jwy.js"></script> 
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <input type="text" name="textbox" id="text1" />
    <input type="button" name="button" id="Button1" value="显示时间" onclick="btnclick()" />
  </div>
  </form>
</body>
</html>

Erstellen Sie einen „allgemeinen Handler“, um Vordergrundanforderungen zu verarbeiten und die aktuelle Systemzeit zurückzugeben:

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;
  // 初始化XMLHttpRequest对象
  if (window.XMLHttpRequest) {
    // Firefox等现代浏览器中的XMLHttpRequest对象创建
    httprequest = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    // IE中的XMLHttpRequest对象创建
    httprequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (!httprequest) {
    alert("创建httprequest对象出现异常！");
  }
  httprequest.open("POST", "Handler.ashx", true);
  //httprequest向handler发送post请求，最后参数是设定是否为异步请求,true为异步，false为同步
  httprequest.onreadystatechange = function () {
    //指定onreadystatechange事件句柄对应的函数
    if (httprequest.readyState == 4) {
      //4代表服务器返回完成
      if (httprequest.status == 200) {
        //200代表成功了
        document.getElementById("text1").value = httprequest.responseText;
        //responsetext表示服务器返回的文本,还有一种方式是responseXML是为了获取服务器返回的xml
      }
      else {
        alert("AJAX服务器返回错误！");
      }
    }
  }
  httprequest.send();
  //在这里才真正的向服务器端发送请求
}

Wir verwenden JQuery, um den Front-End-JS-Code sehr einfach zu gestalten:

JS-Code basierend auf Jquery:

Hinweis: Der HTML-Code muss das Onclick-Ereignis der Schaltfläche entfernen, da wir die Ereignisbindung direkt in js verwenden.

$(document).ready(function () {
  //button1绑定事件
  $("#Button1").bind("click", function () {
    $.ajax({
      url: "Handler.ashx",
      type: "POST",
      success: function (data) {
        //$("#text1").val(data);
        document.getElementById("text1").value = data;
      }
    });
  });
});

Ich muss sagen, dass JQuery „einfach, aber nicht einfach“ ist...

$.ajax in JQuery integriert Get- und Post-Methoden, und der Standardwert ist get.

Wenn Sie POST direkt verwenden, ist der Code einfacher

$(document).ready(function () {
  //button1绑定事件
  $("#Button1").bind("click", function () {
    $.post("Handler.ashx", function (data) {
  document.getElementById("text1").value = data;
    });  
 });
});

Beispiel 2:

1. XMLHttpRequest-Implementierung zum Abrufen von Daten

Verwenden Sie jQuery nicht, um die Methode zum Abrufen von Inhalten zu erreichen, ohne die Seite zu aktualisieren. Wir verwenden hier den nativen XMLHttpRequest-Code

JS-Code lautet wie folgt:

//1.获取a节点，并为其添加Oncilck响应函数
document.getElementsByTagName("a")[0].onclick = function(){
　　 //3、创建一个XMLHttpRequest();
  var request = new XMLHttpRequest();
  //4、准备发送请求的数据url
  var url = this.href;
  var method = "GET";
  //5、调用XMLHttpRequest对象的open方法
  request.open(method,url);
  //6、调用XMLHttpRequest对象的send方法
  request.send(null);
  //7、为XMLHttpRequest对象添加onreadystatechange 响应函数
  request.onreadystatechange = function(){
    //8、判断响应是否完成：XMLHttpRequest 对象的readystate的属性值为4的时候
    if(request.readyState == 4){
       //9、在判断响应是否可用：XMLHttpRequest 对象status 属性值为200
      if(request.status == 200){
           //10、响应结果
           alert(request.responseText);
      }   
    }  
  }    
      //2、取消a节点的额默认行为
      return false;    
}

HTML-Code einfügen:

<a href = "hello.txt">点击获取文本内容</a>

2. jQuery implementiert Ajax, um Informationen zu erhalten

In diesem Beispiel werden Daten dynamisch aus dem Hintergrund abgerufen, um den Inhalt der Dropdown-Schaltfläche zu ändern

JS-Code lautet wie folgt:

function bindCarteam0(){
     //通过URL请求数据
     var URL = <select:link page="/xiaoshouwl.do&#63;method=getCarteamList"/>;
      $.ajax({
        url:URL,
        type:'GET',
        dataType: "json",
        success:function(html){
          var str="<option value='-1'>全部</option>";
          for(var i=0;i<html.length;i++){
            str+="<option value='"+html[i].id+"'>"+html[i].name+"</option>";
          }
          $("#carteam_code").empty().html(str);
        }
      });
   }

HTML-Code lautet wie folgt:

<select:select property="carteam_code" styleId="carteam_code" style="width:150px">
                     <select:option value="-1">全部</select:option>
                </select:select>

Es gibt zwei Arten von Typen: Get und Post;

Die Datenmenge, die Post übertragen kann, ist relativ groß und für den Empfang gilt ein Byte-Limit;

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js implementiert supereinfache Erweiterungs- und Faltverzeichniscode_javascript-FähigkeitenNächster Artikel：js implementiert supereinfache Erweiterungs- und Faltverzeichniscode_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen