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-Serialisierungund 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
<!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>
<title>Ajax of Javascript & jQuery</title>
</head>
<body>
<a href="javascript:getData();">Javascript-Ajax: Click me</a><br />
<br />
<br />
<input id="btn" type="button" value="jQuery-Ajax: Clike me"/>
<hr />
<p id="show">
</p>
<script type="text/javascript">
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 ="<span>"+ obj.name +"</span>";
}
}
}
//通过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);
*/
}
</script>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { //ready函数, 脚本加载完即执行, 也可以用$(...$("#btn").click...)();加载
$("#btn").click(function showData() { //按钮上添加onclick事件, 事件处理方法为showData()
$("#show").load("jquery.ashx"); //从jquery.ashx中获取数据元素(innerHTML的内容), 并显示在p中
});
});
</script>
</body>
</html>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
<%@ WebHandler Language="C#" Class="Json"%>
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
<%@ WebHandler Language="C#" Class="jquery"%>
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 ="<span>{0}</span>";
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<location path="ajaxpro"> <system.web> <httpHandlers> <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> </httpHandlers> <!-- If you need to have Ajax.NET Professional methods running on the login page you may have to enable your own authorization configuration here. --> <!-- <authorization> <deny users="?"/> </authorization> --> </system.web> </location>
protectedvoid Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(CalendarServices)); //AjaxPro会根据注册的类型自动生成脚本
}//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
}
}<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<p>
日期:<input id="date" type="text"/><br />
标题:<input id="title" type="text"/><br />
详情:<textarea id="detail" cols="80" rows="5"></textarea>
<hr />
<input id="btn" type="button" value="确定"/>
</p>
<p>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(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! ");
}
});
});
});
</script>
</p>
</form>
</body>
</html>//c. Registrieren Sie Ajax in der CS-Datei (im Page_Load-Ereignis)
<httpHandlers> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/> </httpHandlers>
//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 :
<script>
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));
}
}
}
</script>//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<Triggers> <asp:AsyncPostBackTrigger ControlID="AspNetPager1"/> <asp:AsyncPostBackTrigger ControlID="btn_Search"/> <asp:AsyncPostBackTrigger ControlID="btn_Delete"/> </Triggers>
<httpHandlers> <!-- 调用AjaxPro.2--> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/> </httpHandlers>
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);
2.
xhr.send("xxx");
xhr.send("name=xxx");
Nicht-Schlüssel-Wert-Paare: Verwenden Sie Get context.Request.InputStream , wie zum Beispiel:
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 öffnetjQuery+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!
Ajax-Tutorial
Ajax-Lösung für verstümmelten chinesischen Code
Was tun, wenn Ajax verstümmelte chinesische Zeichen überträgt?
So führen Sie HTML-Code in vscode aus
So eröffnen Sie ein digitales Währungskonto
Welche Methoden gibt es, um eine Operatorüberladung in der Go-Sprache zu implementieren?
Lösung für die Erlaubnis verweigert
Welche Methoden zur Datenspeicherung gibt es?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
