3 Möglichkeiten, Ajax zu implementieren

Dieses Mal stelle ich Ihnen 3 Methoden zur Implementierung von Ajax vor. Was sind die Vorsichtsmaßnahmen , um Ajax zu implementieren?

Ajax: Asynchrone JavaScript- und Json-Objekte statt Es gehört zur Web-Front-End-Entwicklungstechnologie und hat eine äußerst enge Beziehung zu JavaScript. Ajax ist eine Technologie, die asynchrone Kommunikation ohne Aktualisierung realisiert, und diese Technologie kann implementiert werden In vielerlei Hinsicht wurde es zuerst von NetScape, dem Erfinder des Browsers, erfunden, um den Ausdruck von Webseitenelementen zu bereichern und der Webseite die Darstellung dynamischer Effekte zu ermöglichen Zur gleichen Zeit erkannte auch Microsoft die Zukunftsaussichten des Internets und startete die Einführung der JScript-Sprache. Leider war sie noch nicht so ausgereift wie JavaScript und ihre Entwicklung stagnierte , Microsofts Entschlossenheit für das Internet hat dazu beigetragen, dass MS lange und mühsam NS übernommen hat

Lassen Sie mich hier erwähnen, dass die Dynamic Hyper Text Markup Language Javascript im Elementknoten des Dom-Baums platziert, um ein dynamisches Anzeigeverhalten bereitzustellen für die Elemente. (2) Zwei Aspekte der Web-Front-End-Entwicklung:

a. Browser-Plugin ---> >2. Flash: MicroMedia ---> Übernommen von Adobe ---> flex

Hinweis:

Um asynchron mit dem Server im Hintergrund kommunizieren zu können Für die Kommunikation hat Microsoft dem IE zwei Komponenten hinzugefügt: die für die Kommunikation zuständige Komponente Mit dem Server (XMLHTTPRequest) und der XML-Verarbeitungskomponente hat die Verwendung von XML als Träger des Datenaustauschs Vorteile bei der mehrsprachigen Verarbeitung, aber die Verarbeitungskosten von XML sind relativ hoch. Tatsächlich werden in Ajax normalerweise Json-Objekte verwendet um Daten zwischen dem Client-Browser und dem Server zu übertragen.Der Generierungsprozess von Webseiten wird tatsächlich von einer Reihe von Programmen auf dem Server abgeschlossen, um Daten zwischen der JS-Sprache und der Serverseite zu übertragen C#-Sprache, .Net bietet

Json-Serialisierung

und Deserialisierer, um die Konvertierung zwischen serverseitigen C#-Objekten und Json-Objekten zu ermöglichen. Sie kann auf der Browserseite verwendet werden. Die Funktion eval() ruft die vom Server übergebene Json-Zeichenfolge ab und konvertiert es in ein Json-Objekt

(3) Welche Probleme löst Ajax

Wir alle wissen, wenn der Client ein Seite vom Server, der Server berechnet und generiert die Seite zunächst dynamisch und sendet sie dann an den Client. Der Client-Browser kompiliert und rendert die Seite sequentiell.

Ohne Ajax: Wenn die Seite eine Benutzerüberprüfung hat Wenn der Client-Browser dann das Überprüfungsergebnis des Servers anzeigt, kann er weiterhin die Seitenelemente anzeigen. Dies ist normalerweise der Fall Die sogenannte Synchronisierungsmethode führt dazu, dass die Webseite nach der Verwendung von Ajax in einem Zustand der angehaltenen Animation angezeigt wird: Dies ist auch eine Überprüfungskontrolle Fahren Sie fort, andere Elemente nacheinander zu rendern. Nachdem das Überprüfungsergebnis erhalten wurde, wird das DOM-Objekt im Speicher auf der Clientseite geändert und dem Benutzer angezeigt (Hinweis: Hier wird nur das DOM-Objekt im Speicher geändert Die vom Client empfangene Auslagerungsdatei wird nicht geändert. Auf diese Weise wird bei Verwendung der asynchronen Methode kein angehaltener Animationsstatus angezeigt, und der Client spart außerdem Zeit, bis der Server Ergebnisse zurückgibt

(IV )Ajax-Implementierung

(Bei der Implementierung von Ajax in 3 ist zu beachten: Die Effekte, die Ajax erzielen kann, können durch erreicht werden WebService.)1. Ajax asynchroner Aufruf in Js: a.new b.onreadystatechange (Verarbeitung von Antworttext) c.open (Get-Modus und Post-Modus) d.send (synchroner Aufruf: a.new b.open (Get-Modus und Post-Modus) c.send d.responseText)

//ajax.html

b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7Ajax of Javascript & jQuery6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a4944a33d466fdeb777db7c0cddde24aJavascript-Ajax: Click me5db79b134e9f6b82c0b36e0489ee08edff9d32c555bb1d9133a29eb4371c1213
ff9d32c555bb1d9133a29eb4371c1213
ff9d32c555bb1d9133a29eb4371c1213
ff5f8a68d680bdab4d70addeeb2a1b4f
cdcaaee4c9b94464012808ae8e1b67a4
8000ba296d549aa85ddd602dfed0879b
94b3e26ee717c64999d7867364b1b4a3
8019067d09615e43c7904885b5246f0a
function getData() {
//创建XMLHttpRequest通信对象
var xhr;
if (window.ActiveXObject) { //标准情况下, 只能有两个ActiveXObject对象处理通信过程
xhr =new ActiveXObject("Microsoft.XMLHTTP");
}
elseif (window.XMLHttpRequest) {
xhr =new XMLHttpRequest();
}
else {
thrownew Error("Ajax is not supported by this browser");
}
var elem = document.getElementById("show"); //用来显示处理结果
//使用onreadystatechange事件处理结果
xhr.onreadystatechange =function() {
if (xhr.readyState ==4) { // readyState表示服务器响应状态. 4: 响应接收完毕
if (xhr.status ==200) { // status 表示 http 请求的状态
var json = xhr.responseText; //从请求中回应中获得json串
var obj = eval("("+ json +")"); // 借助 eval 将 json 串转化为对象, 在客户端浏览器必须解析为js对象
elem.innerHTML ="45a2772a6b6107b401db3c9b82c049c2"+ obj.name +"54bdf357c58b8a65c66d7c19c8e4d114";
}
}
}
//通过open设置请求方式
xhr.open("get", "json.ashx", true); //默认为ture, false表示同步方式
//发送请求
xhr.send(null);
/* 同步方式, false表示不适用异步方式
xhr.open("get", "json.ashx", false);
xhr.send(null);
//处理结果
alert(xhr.responseText);
*/
}
2cacc6d41bbb37262a98f745aa00fbf0
75e04825979975331ecfa2ba27e4aa262cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a
$(function() { //ready函数, 脚本加载完即执行, 也可以用$(...$("#btn").click...)();加载
$("#btn").click(function showData() { //按钮上添加onclick事件, 事件处理方法为showData()
$("#show").load("jquery.ashx"); //从jquery.ashx中获取数据元素(innerHTML的内容), 并显示在p中
});
});
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Dann müssen Sie dem Projekt auch ein allgemeines Verarbeitungsprogramm hinzufügen, das json.ashx ähnelt, um relevante Daten bereitzustellen (z. B. Zeichnen von Tischkalendern, Datenbanküberprüfung usw.)

// json .ashx

c7ff4b40161fd6c8a00dc7690f832b91
using System;
using System.Web;
publicclass Json : IHttpHandler {
publicvoid ProcessRequest (HttpContext context) {
context.Response.ContentType ="text/plain";
//对于静态内容, 需要禁用浏览器的缓存, 否则老是旧结果
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
string name ="Mike";
string jsonFormat ="{{ \"name\": \"{0}\" }}"; //{{、}}是为了避免和Json中的{冲突而采用的特殊转义符
string json =string.Format(jsonFormat, name);
context.Response.Output.Write(json);
}
publicbool IsReusable {
get {
returnfalse;
}
}
}

//jquery.ashx

fecdf968e6bdaa0184e3cc74e96e4509
using System;
using System.Web;
publicclass jquery : IHttpHandler {
publicvoid ProcessRequest (HttpContext context) {
context.Response.ContentType ="text/plain";
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
DateTime now = DateTime.Now;
string jqueryFormat ="45a2772a6b6107b401db3c9b82c049c2{0}54bdf357c58b8a65c66d7c19c8e4d114";
string jquery =string.Format(jqueryFormat, now);
context.Response.Write(jquery);
}
publicbool IsReusable {
get {
returnfalse;
}
}
}

2.1 Verwendung von AjaxPro2:

a. AjaxPro2-Klassenbibliothek hinzufügen (AjaxPro2.dll) b.webconfig Hinzufügen Konfigurationsdatei c. Erstellen Sie in App_Code eine Klassenbibliotheksdatei (CS-Datei), um den Ajax-Dienst bereitzustellen, und registrieren Sie Ajax in der Hintergrund-CS-Datei, die der Seite entspricht (im Page_Load-Ereignis). ) d. Schreiben Sie die Verarbeitungsmethode mit dem Ajax-Tag in die Klassenbibliotheksdatei (CS-Datei) in App_Code. e. Verwenden Sie das Skript in der ASPX-Datei im Vordergrund, um die Ergebnisse zu verarbeiten (das DOM-Objekt im Speicher zu ändern) und anzuzeigen die Seite

//Konfigurationsdatei in b.webconfig hinzufügen

7448052ee0aa438ce73e0a8b3dd611ad
2dc15ec6bc814c3aa45b55d017848bed
7342c004d9ee91801ac5c2892c1ed716
d77b1e247b97cf6a9c1fdda6c7a23d67
a678e556e2e40b2e2d09f69cb325521e
eb1e6c2aa0bb52bd43b314e30abaced1
0baa241499d00b9f72989b26007af186
b525c13248727c3ef0eae09176cb9d65
137d563e8590cea2318915a677e376a3
-->
4ec4537ca3582453b3a7c44816bcf480
eb393cd7f0c41cf1136847ec1779eae4

//c. Erstellen Sie eine Klassenbibliotheksdatei (cs-Datei) in App_Code, um den Ajax-Dienst bereitzustellen, und registrieren Sie Ajax in die Hintergrund-CS-Datei, die der Seite entspricht (im Page_Load-Ereignis)

//default.aspx.cs-Datei

protectedvoid Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(CalendarServices)); //AjaxPro会根据注册的类型自动生成脚本
}

//d Schreiben Sie das Ajax-Tag in die Klassenbibliotheksdatei (cs-Datei) in der App_Code-Verarbeitungsmethode

//CalendarServices.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
publicclass CalendarServices
{
[AjaxPro.AjaxMethod]
publicbool save(string date, string tile, string detail)
{
System.Threading.Thread.Sleep(5000); //用来测试异步
returntrue; //这里为简单, 直接返回true
}
}

//e. Verwenden Sie die Skriptverarbeitungsergebnisse in der ASPX-Datei im Vordergrund (ändern Sie das DOM Objekt im Speicher) und zeigen Sie es in der Datei

//default.aspx auf der Seite

3e93250a76b57894af92dc400b183f5e
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
22e6244c9f89e2a72231546ed5a2733f
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a56165225b53ae2239a99091f5fba8ce
e388a4556c0f65e1904146cc1a846bee
日期:09e49708bcedb0348acbe74892c4d650ff9d32c555bb1d9133a29eb4371c1213
标题:0011a500b134bfab6059b11b2ac1a083ff9d32c555bb1d9133a29eb4371c1213
详情:4850dc40fe676b0981b4bf5d42d7938140587128eee8df8f03d0b607fe983014
cdcaaee4c9b94464012808ae8e1b67a4
062cbd68642114d29cfacc632d9cc1ca
94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee
75e04825979975331ecfa2ba27e4aa262cacc6d41bbb37262a98f745aa00fbf0
8019067d09615e43c7904885b5246f0a
$(function() {
$("#btn").click(function() {
var date = $("#date").val();
var title = $("#title").val();
var detail = $("#detail").val();
//由AjaxPro生成的js代理, 很像C#中类库的使用, 其中function(result)是异步的结果处理方法
CalendarServices.save(date, title, detail, function(result) {
if (result.error !=null) { //服务器上出现异常
alert(result.error.Message);
}
if (result.value) { //服务器cs文件中的方法返回永真
alert("服务器返回true! ");
}
});
});
});
2cacc6d41bbb37262a98f745aa00fbf0
94b3e26ee717c64999d7867364b1b4a3
f5a47148e367a6035fd7a2faa965022e
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

2.2 an. Boss Ajax kann tatsächlich zur Verwaltung alter Projekte verwendet werden ist dem zweiten Typ sehr ähnlich: a. Referenz Ajax-Framework-Klassenbibliothek b. Fügen Sie die Ajax-Dienstklasse in App_Code hinzu und registrieren Sie Ajax in der CS-Datei (Page_Load-Ereignis). d CS-Datei in App_Code e. Schaltfläche Binden Sie die JS-Verarbeitungsmethode

//a Konfiguration zu webconfig

//c. Registrieren Sie Ajax in der CS-Datei (im Page_Load-Ereignis)

7342c004d9ee91801ac5c2892c1ed716
818d942dd69335e976415bd974d8f403
a678e556e2e40b2e2d09f69cb325521e

//d. Verarbeitungsmethoden mit Ajax-Tags in der CS-Datei in App_Code

Ajax.Utility.RegisterTypeForAjax(typeof(SysBase_UserEdit)); //SysBase_UserEdit是页面文件名称

//e. Schaltflächenbindung löst JS-Methode aus

[Ajax.AjaxMethod]
public DataSet getRoleData(int Roleid)
{
DataSet ds =new DataSet();
ds = r.SelectRoleData(string.Format(" and id={0}", Roleid));
return ds;
}

//f. JS-Verarbeitungsmethode

this.DDLRole.Attributes.Add("onpropertychange", "onCommandInputPropertyChange();"); //在Page_Load事件中基于Attribute为按钮绑定方法, 在aspx文件中手动添加也可以

3 :

3f1c4e4b6b16bbbd69b2ee476dc4f83a 
  function onCommandInputPropertyChange(){ 
    if (event.propertyName == "value"){ 
      var cmdInput = event.srcElement; 
      if (cmdInput.value != 0){ 
        //alert(cmdInput.value); 
    BindRoleName(cmdInput.value);    
      } 
    } 
  } 
  //绑定角色名 
  function BindRoleName(RoleID){ 
  //SysBase_UserEdit是aspx页面的名称 
    SysBase_UserEdit.getRoleData(RoleID,get_AllName); 
  } 
  function get_AllName(response){ 
    var AllName = document.getElementById("DDLAjax"); 
    AllName.length = 0; 
    if (response.value != null){ 
      var ds = response.value; 
      if(ds != null && typeof(ds) == "object"){      
        var name = ds.Tables[0].Rows[0].rolename; 
      var id = ds.Tables[0].Rows[0].id;      
      AllName.options.add(new Option(name,id)); 
    } 
  } 
  } 
2cacc6d41bbb37262a98f745aa00fbf0

a. Für VS2005 müssen Sie das Plug-in (Microsoft ASP.NET 2.0 AJAX-Erweiterungen) installieren. b. Platzieren Sie das ScriptManager-Steuerelement neben dem Formularelement c Um es zu aktualisieren, verwenden Sie UpdatePanel und ContentTemplate. d Platzieren Sie am Ende des Tabellenelements das Triggerelement zwischen ContentTemplate und UpdatePanel und registrieren Sie die Ajax-Triggerschaltfläche >

//d. Platzieren Sie den Trigger zwischen ContentTemplate und UpdatePanel am Ende des Tabellenelements, registrieren Sie die Ajax-Trigger-Schaltfläche (btn_Search, btn_Delete sind Schaltflächen)

//f muss webConfig konfigurieren

0a8ecf1acd1a0a3f90f72a96b90e798e
b2d86b00b6244ca94e110698e939eca6
60fb8f191e5eb174b120bfd153c6c543
45e7fb75d0c052202c651a994d0d92fa
964d468c0797735e3eb6033b3b17750b

========== ==================Trennlinie======= =====================

Über den ersten Typ: Ajax-Asynchronaufruf in Js, ich werde etwas hinzufügen, ich werde es nicht separat starten

7342c004d9ee91801ac5c2892c1ed716
33f009ceb7c4b8445d06b6373519952d
87366aed792f07ec516ac37f05d956f5
d343374be96a9d7554af644c494a8647
994024a0a6f3fd08208ef5cc0c126461
4cb54fd5f1591ce0177321bcb07d1670
44b23a7d49d2f9b59bfdb74d9fbb1604
a678e556e2e40b2e2d09f69cb325521e

Informationen zur Parameterübergabe:

1.Übergeben Sie Parameter im Get-Modus, und die Parameter werden beispielsweise in der URL gespeichert :

xhr.open("get", "json.ashx?name=xxx", true);

xhr.send(null);

Auf der Serverseite (json .ashx-Backend-Code), kann mithilfe des Parameterobjektkontexts vom Typ HttpContext abgerufen werden. Die Erfassungsmethode ist context.Request.QueryString["name"]. ..Warten Sie (sehen Sie es sich selbst im Debugging-Modus an)

2.

Übertragen Sie Parameter im Post-Modus und die Parameter werden im Hauptteil des Anforderungspakets gespeichert, zum Beispiel:

xhr .open("post","json.ashx" ,true);

xhr.send("xxx");

oder

xhr.send("name=xxx");

Die entsprechende Serverseite (json. ashx-Backend-Code) gibt es zwei Möglichkeiten, die „Nicht-Schlüssel-Wert-Paare“ und „Schlüssel-Wert-Paare“ in 2 zu erhalten:

Nicht-Schlüssel-Wert-Paare: Verwenden Sie Get context.Request.InputStream , wie zum Beispiel:

was eine Codierungskonvertierung beinhaltet, Sie müssen es selbst anpassen

Schlüssel-Wert-Paar: Verwenden Sie context.Request.Form["name"] ... Holen Sie sich

System.IO.Stream stream = context.Request.InputStream;
System.IO.StreamReader sr = new System.IO.StreamReader(stream);
string strParam = sr.ReadToEnd();

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So vermeiden Sie, vom Browser abgefangen zu werden, wenn ein Ajax-Rückruf ein neues Formular öffnet

jQuery+AJAX ruft den Hintergrund der Seite auf

Das obige ist der detaillierte Inhalt von3 Möglichkeiten, Ajax zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!