September 30
Asynchronous JavaScript and XML, noto anche come AJAX, offre agli sviluppatori Web un insieme di tecniche che trasformano le pagine Web statiche in dinamiche, applicazioni web interattive. Imparare ad usare AJAX non è difficile, richiede solo un po 'di comprensione di come funziona il processo di comunicazione. Una richiesta viene inviata al server ma invece di aspettare una risposta, il processo utilizza una tecnica nota come "callback". Quando il server risponde infine, una funzione di callback separata esegue. Seguire questi passi per creare la propria funzione di callback AJAX.
1 Aprire Visual Studio e creare un nuovo progetto Web di Visual Basic. Fai clic su "File" e poi "Nuovo progetto". Quando viene visualizzata la nuova finestra di progetto, scegliere "Visual Basic / Web" dalla vista ad albero e fare clic sull'icona "ASP.Net Web Application". Nome del progetto "AjaxSample" e fare clic su "OK". Dopo una breve attesa, apparirà una nuova area di lavoro di progetto.
2 Creare un semplice servizio Web. Fai clic su "Progetto" e "Aggiungi nuovo elemento." Fare clic sull'icona "Web Form". Il nome "Service1" e fare clic Quando viene visualizzata la finestra di progettazione, fare clic destro sulla finestra e selezionate Aggiungere il seguente codice al gestore Page_Load "Aggiungi". "Visualizza codice.":
Protected Sub Page_Load (ByVal sender As Object, ByVal e come System.EventArgs) tratta Me.Load
Response.Clear()
Response.Write("Hello World!")
Response.End()
End Sub
Quando viene richiesta questa pagina, il testo "Ciao Mondo!" Viene inviato al posto di una pagina HTML.
3 Aprire il markup per default.aspx. Nella finestra Esplora soluzioni, fare clic su "default.aspx" e scegliere Aggiungi due intestazioni e un pulsante per il modulo come segue "Visualizza Markup.":
<% @ Page Title = "Home Page" Language = "VB" MasterPageFile = "~ / Site.master" AutoEventWireup = "false"
CodeBehind="Default.aspx.vb" Inherits="AjaxSample._Default" %>
<Asp: Content ID = runat "HeaderContent" = "server" ContentPlaceHolderID = "HeadContent">
</ Asp: Content>
<Asp: Content ID = "BodyContent" runat = "server" ContentPlaceHolderID = "mainContent">
<h2>
AJAX Sample
</h2>
<h3 id="title2"></h3>
<input type="button" id="btnTest" value="Test" onclick='btnTest_click()' />
4 Aggiungere il codice JavaScript che chiama il servizio Web. Inizia dichiarando una RQST variabile globale che conterrà l'oggetto XMLHttpRequest:
<Script type = "text / javascript">
var RQST;
5 Creare una funzione per gestire l'evento click del pulsante:
funzione btnTest_Click () {
rqst = new XMLHttpRequest();
rqst.open("get", "Service1.aspx", true);
rqst.onreadystatechange = getResponse;
rqst.send();
}
Questa funzione crea un oggetto XMLHttpRequest, chiama il suo metodo aperto con l'URL del servizio Web (Service1.aspx), imposta la funzione di callback quindi chiama il suo metodo di invio per inviare la richiesta.
6 Creare la funzione getResponse utilizzando il seguente codice:
Funzione getResponse () {
var title2 = document.getElementById("title2");
if (rqst.readyState == 4)
title2.innerHTML = rqst.responseText;
}
</ Script>
</ Asp: Content>
Il server può rispondere più volte, cambiando il readyState da zero a 4. Quando il valore cambia a 4, la risposta è completa ed è possibile recuperare il risultato utilizzando la proprietà responseText del XMLHttpRequest. Questo valore è collocato all'interno del titolo seconda pagina (h3).
7 Eseguire il programma. Fai clic su "F5" per aprire la pagina. Fare clic sul pulsante "Test" per eseguire il codice JavaScript.