Ajax (asynchronousjavascriptandxml) javascript dan xml asinkron.
Ini untuk mengatasi kekurangan model "kirim permintaan-tunggu respons" dalam aplikasi web tradisional (Setelah mengirimkan permintaan, browser hanya dapat menunggu respons server. Pengguna tidak dapat melakukan operasi lain. Setelah browser mengirimkan respons. permintaan, akan meninggalkan seluruh halaman dan menunggu server mengembalikan halaman baru. Dengan kata lain, jumlah data yang berinteraksi antara browser dan server sangat besar dan data tidak dapat diperoleh sesuai permintaan). adalah: melalui objek An (XmlHttpRequest) yang dibangun di dalam browser mengirimkan permintaan ke server secara asinkron.
Yang disebut asinkron berarti browser tidak meninggalkan seluruh halaman, yaitu tidak mengirim data ke server melalui pengiriman formulir. Setelah server memproses permintaan, ia mengembalikan data ke objek XmlHttpRequest, dan data di XmlHttpRequest dapat diperoleh melalui javascript. Kemudian, Gunakan data ini untuk memperbarui halaman. Selama seluruh proses, pengguna tidak perlu menunggu respons dari server.
Deskripsi: Teknologi transmisi halaman web yang tidak sinkron. Suatu metode untuk berkomunikasi dengan server tanpa menyegarkan seluruh halaman. Sambil menunggu transmisi halaman web, pengguna masih dapat berinteraksi dengan sistem, dan halaman dapat memperbarui konten tanpa menyegarkan Penggunaan yang wajar dapat membuat pengguna merasa lebih baik dan nyaman, tetapi jangan menyalahgunakannya
Sinkron dan asinkron
Sinkronisasi mengacu pada metode komunikasi di mana pengirim mengirimkan data dan menunggu penerima mengirimkan kembali respons sebelum mengirim paket data berikutnya.
Misal Sinkronisasi: kirim permintaan -> tunggu pemrosesan server -> kembali setelah pemrosesan. Selama periode ini, browser klien tidak dapat melakukan apa pun a respon, dan kemudian mengirimkan paket data berikutnya metode
Misalnya Asynchronous: Permintaan dipicu oleh suatu peristiwa -> diproses oleh server (browser masih dapat melakukan hal lain saat ini) -> diproses
Objek penting dari AjaxXMLHttpRequest
Objek Javascript penting, yang melaluinya permintaan ke server dapat dibuat. Permintaan dapat dilakukan melalui Javascript. Jika beberapa permintaan ingin dibuat, diperlukan beberapa objek XHR.
Cara membuat objek XmlHttpRequest
fungsi getXmlHttpRequest(){
var xmlHttpRequest = nol;
if ((typeof XMLHttpRequest) != 'tidak terdefinisi') {
//browser non-yaitu
xmlHttpRequest = XMLHttpRequest baru();
}kalau tidak {
//yaitu peramban
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
kembalikan xmlHttpRequest;
}
atau
fungsi buatXmlHttpRequest(){
var xmlHttpRequest = nol;
if(jendela.ActiveXObject){
xmlHttpRequest = new AvtiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpRequest = XMLHttpRequest baru();
}
}
Properti penting dari objek xmlHttpRequest.
responXml: Dapatkan data xml dari respons server
status: Dapatkan kode status yang dikembalikan oleh server (misalnya 200)
readyState: Dapatkan status komunikasi antara xmlHttpRequest dan server (0, 1, 2, 3, 4, masing-masing menjelaskan status berbeda).
(Tidak diinisialisasi): Objek telah dibuat, tetapi belum diinisialisasi (metode terbuka belum dipanggil)
(Inisialisasi): Objek telah dibuat dan metode pengiriman belum dipanggil.
(Kirim data): Metode pengiriman telah dipanggil, namun status saat ini dan header http tidak diketahui
(Transmisi data sedang berlangsung): Sebagian data telah diterima.
(Akhir dari respon): Pada titik ini, data dapat diperoleh melalui responText/responseXml.
Contoh aplikasi yang diimplementasikan oleh seseorang menggunakan Ajax
Tangkapan layar sistem
Deskripsi sistem:
Diagram struktur sistem
Menampilkan halaman depan register.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transisi//EN">
<html>
<kepala>
<title>Pendaftaran pengguna</title>
<link href="css/regist.css" rel="stylesheet" type="text/css" />
<skrip src="js/regist_ajax.js" type="teks/javascript"></skrip>
</kepala>
<body onload="getRegistRuleTxt(),getCheckcode()">
<form action="regist.do" onsubmit="kembalikan cek(ini);">
<tabel bordercolor="gray" cellpadding="6" align="center">
<tr>
<td colspan="2">
>> <font color="red">Pendaftaran pengguna</font>
<font color="gray">[Deskripsi modul: Pemeriksaan nama pengguna, persyaratan layanan menggunakan pemrosesan asinkron Ajax, pembuatan server kode verifikasi]</font>
</td>
</tr>
<tr>
<td menyelaraskan="kanan">
nama belakang:
</td>
<td>
<input type="teks" nama="nama pengguna" id="nama pengguna" onblur="postValidate()"/>
<span style="color:orange" id="checkMsg" > * Nama pengguna terdiri dari huruf, angka, dan garis bawah.</span>
</td>
</tr>
<tr>
<td menyelaraskan="kanan">
kata sandi:
</td>
<td>
<masukan tipe='kata sandi' nama='kata sandi' id='kata sandi'>
<span style="color:orange" id="pwdMsg" > * Panjang kata sandi adalah 6-8 karakter. Demi keamanan, format unik harus dihindari.</span>
</td>
</tr>
<tr>
<td menyelaraskan="kanan">
Konfirmasi Kata Sandi:
</td>
<td>
<input type=”kata sandi” nama=”kata sandi ulang” id=”kata sandi ulang”>
<span style="color:orange" id="repwdMsg" > * Konfirmasi sandi untuk memastikan Anda tidak melakukan kesalahan saat menyetel sandi</span>
</td>
</tr>
<tr>
<td menyelaraskan="kanan">
Surat:
</td>
<td>
<masukan tipe="teks" id="email" nama="email">
<span style="color:orange" id="emailMsg" > * Masukkan alamat email Anda yang biasa agar kami dapat menghubungi Anda.</span>
</td>
</tr>
<tr>
<td menyelaraskan="kanan">
Kode verifikasi:
</td>
<td>
<input type="teks" id="kode periksa">
<img id="ckcodeimage" src="imgsrc" style="border:solid #92CEDB 1px "> <!-- Kode verifikasi-->
<a href="javascript:;" onclick="getCheckcode()">Tidak dapat melihat dengan jelas, ubah yang lain</a>
<span style="color:orange" id="ckcodeMsg" > </span>
</td>
</tr>
<tr>
<td menyelaraskan="kanan">
Ketentuan Layanan:
</td>
<td>
<textarea row="5" cols="48" style="margin-bottom:6px;margin-left:5px; color:gray" readonly="readonly" id="item" >
</area teks>
</td>
</tr>
<tr>
<td menyelaraskan="kanan">
</td>
<td>
<input type="submit" value="Setujui persyaratan dan daftar"/>
</td>
</tr>
</tabel>
<div align="tengah">
Hak Cipta (c) 2013 Su Ruonian ( <a href="mailto:[email protected]">Hubungi kami:[email protected]</a> )
korporasi Semua Hak Dilindungi Undang-undang.
</div>
</bentuk>
</tubuh>
</html>
/*
Buat metode untuk mendapatkan objek xmlHttpRequest
*/
fungsi getXmlHttpRequest(){
var xmlHttpRequest = nol;
if((typeof XMLHttpRequest) != 'tidak terdefinisi'){
/*Browser non-IE membuat objek XMLHttpRequest*/
xmlHttpRequest = XMLHttpRequest baru();
}kalau tidak{
/*Browser IE membuat objek XMLHttpRequest*/
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
kembalikan xmlHttpRequest;
}
/*
Peristiwa respons kode verifikasi
*/
fungsi getCheckcode(){
var codeimage = document.getElementById("ckcodeimage");
var url = "kode periksa.lakukan";
codeimage.src=addTimestamp(url);
}
/*
Menggunakan Ajax untuk mendapatkan persyaratan layanan
*/
fungsi getRegistRuleTxt(){
var item = dokumen.getElementById("item");
var url = "rulesText.do";
//Selesaikan masalah penyandian berbahasa Mandarin saat mengirimkan dalam mode get. Gunakan encodeURI(url).true untuk menunjukkan bahwa permintaan dikirim secara asinkron, dan addTimestamp(url) mencegah cache browser.
xmlHttpRequest.open("post",encodeURI(url),true);
xmlHttpRequest.setRequestHeader("Tipe Konten","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=fungsi(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
item.value=respTeks;
}kalau tidak{
//Kesalahan sistem.
item.value="kesalahan sistem";
}
}kalau tidak{
//Pemeriksaan tampilan...
item.value="memuat...";
}
};
xmlHttpRequest.kirim(null);
}
/*
Gunakan metode get untuk memverifikasi
*/
fungsi getValidate(){
var nama pengguna = document.getElementById("nama pengguna");
var url = "validatename.do?username=" + nama pengguna.nilai;
//Selesaikan masalah penyandian berbahasa Mandarin saat mengirimkan dalam mode get. Gunakan encodeURI(url).true untuk menunjukkan bahwa permintaan dikirim secara asinkron, dan addTimestamp(url) mencegah cache browser.
xmlHttpRequest.open("dapatkan",encodeURI(addTimestamp(url)),true);
//Panggil metode untuk memeriksa status pengembalian
xmlHttpRequest.onreadystatechange=panggilan balik;
xmlHttpRequest.kirim(null);
}
/*
Gunakan metode posting untuk memverifikasi
*/
fungsi pascaValidate(){
var nama pengguna = document.getElementById("nama pengguna");
var url = "validasi nama.do";
//true berarti menggunakan metode asynchronous untuk mengirim permintaan. Defaultnya adalah true, dan metode permintaan dapat berupa get, post, put, delete
xmlHttpRequest.open('posting',url,benar);
xmlHttpRequest.setRequestHeader("Tipe Konten","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=panggilan balik;
//Jika ada beberapa parameter, gunakan simbol & untuk menghubungkan pasangan nilai kunci, dan escape digunakan untuk menyelesaikan masalah bahasa Mandarin
xmlHttpRequest.send('nama pengguna=' + escape(nama pengguna.nilai));
}
/*
Metode pengembalian status pemantauan
*/
fungsi panggilan balik(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
innerHtmlMsg(respTeks);
}kalau tidak{
//Kesalahan sistem.
innerHtmlMsg("kesalahan");
}
}kalau tidak{
//Pemeriksaan tampilan...
innerHtmlMsg("memeriksa");
}
}
/*
Tambahkan stempel waktu untuk mencegah cache browser. Caching browser hanya menyimpan cache metode get.
*/
fungsi tambahkan Stempel Waktu(url){
if(url.indexOf("?")!=-1){
//Jika ada parameter
return url+"×tamp=" + Tanggal baru().valueOf();
}kalau tidak{
//tidak ada parameter
return url+"?timestamp=" + Tanggal baru().valueOf();
}
}
fungsi innerHtmlMsg(pesan){
var checkMsg = dokumen.getElementById("checkMsg");
if(pesan=='ada'){
//Nama pengguna ada
checkMsg.innerHTML= "<font color='red'>* Maaf, nama pengguna sudah ada.</font>";
}
if(pesan=='tidak ada'){
//Nama pengguna dapat digunakan
checkMsg.innerHTML= "<font color='green'>* Selamat, nama pengguna tersedia.</font>";
}
if(pesan=='memeriksa'){
//Pemeriksaan sistem
checkMsg.innerHTML= "<font color='#0099aa'>* Sistem sedang memeriksa data...</font>";
}
if(pesan=='kesalahan'){
//Kesalahan sistem
checkMsg.innerHTML= "<font color='red'>Kegagalan sistem, harap periksa jaringan, atau <a href='#'>Hubungi kami</a></font>";
}
}
} /* Menentukan lebar keseluruhan dan gaya batas tabel, serta menentukan gaya semua teks dalam tabel */
.kiri{
berat font:500;
warna:#708899;
padding-kanan:20px;
warna latar belakang: #D6ECF5;
}
.inpt {
perbatasan:padat #92CEDB 1 piksel;
lebar: 210 piksel;
tinggi: 22 piksel;
margin-kiri: 10px;
}
.benar{
margin-atas:20px;
warna:#708899;
ukuran font:12px;
}
<servlet>
<servlet-name>UserServlet</servlet-name>
<servlet-class>com.webapp.servlet.UserServlet</servlet-class>
<init-param>
<nama-param>jalur file aturan</nama-param>
<param-value>/txt/item.txt</param-value>
</init-param>
</servlet>
<pemetaan-servlet>
<servlet-name>UserServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</pemetaan-servlet>
<daftar-file-selamat datang>
<file-selamat datang>regist.jsp</file-selamat datang>
</daftar-file-selamat datang>
</aplikasi web>
impor java.awt.Color;
impor java.awt.Font;
impor java.awt.Grafik;
impor java.awt.image.BufferedImage;
impor java.util.HashMap;
import java.util.Map;
import java.util.Acak;
/**
*
* @versi: 1.1
*
* @penulis: Su Ruonian<a href="mailto:[email protected]">Kirim email</a>
*
* @sejak: 1.0 Waktu pembuatan: 20-1-2013 16:26:52
*
* @fungsi: TODO
*
*/
kelas publik CheckCodeImageUtil {
string akhir statis pribadi[] karakter = { "0", "1", "2", "3", "4", "5", "6",
"7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I" };
private static final int SIZE = 4; //Jumlah karakter dalam kode verifikasi
private static final int LINES = 4; //jumlah jalur interferensi
private static final int WIDTH = 110; //Lebar gambar kode verifikasi
private static final int HEIGHT = 40; //Tinggi gambar kode verifikasi
private static final int FONT_SIZE = 21; //Ukuran font pada kode verifikasi
/**
* Hasilkan kode verifikasi
*
* @return Map<nilai kode verifikasi, gambar kode verifikasi>
*
*/
Peta statis publik<String,BufferedImage> creatCheckImage(){
//Simpan string yang menghasilkan nilai sebenarnya dari kode verifikasi
StringBuffer buffer = StringBuffer baru();
//Objek gambar khusus
Gambar BufferedImage = BufferedImage baru(LEBAR,TINGGI,BufferedImage.TYPE_INT_RGB);
Peta<String,BufferedImage> peta = HashMap baru<String,BufferedImage>();
Grafik grafis = image.getGraphics();
grafis.setColor(Warna.PUTIH);
grafis.fillRect(0, 0, LEBAR, TINGGI);
Acak acak = baru Acak();
//Gambar karakter acak
untuk(int i=0; i<UKURAN; i++){
//Dapatkan elemen dari kumpulan karakter yang ditentukan
int Rand = random.nextInt(karakter.panjang);
grafis.setColor(randomColor());
grafis.setFont(Font baru(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
grafis.drawString(karakter[rand],(i)*LEBAR/UKURAN+8, TINGGI/2+10);
buffer.append(chars[rand]); //Simpan string yang dihasilkan ke dalam buffer dan gunakan untuk membandingkan dengan nilai yang dimasukkan oleh pengguna saat diperoleh di masa mendatang.
}
//Gambar garis interferensi
untuk(int i=1;i<=GARIS;i++){
grafis.setColor(randomColor());
grafis.drawLine(random.nextInt(WIDTH), random.nextInt(HEIGHT), random.nextInt(WIDTH),random.nextInt(HEIGHT));
jika(i==GARIS){
grafis.setFont(Font baru(null,Font.ITALIC,13));
grafis.setColor(Warna.GREY);
grafis.drawString("Su Ruonian Studio", 5,15);
}
}
peta.put(buffer.toString(), gambar);
peta kembali;
}
/**
* Warna akan segera dihasilkan
* @kembali
*/
warna statis publik warna acak(){
Acak acak = baru Acak();
Warna warna = Warna baru(random.nextInt(256),random.nextInt(256),random.nextInt(256));
mengembalikan warna;
}
}
impor java.awt.image.BufferedImage;
impor java.io.BufferedReader;
impor java.io.ByteArrayInputStream;
impor java.io.ByteArrayOutputStream;
impor java.io.File;
impor java.io.FileReader;
impor java.io.FileWriter;
impor java.io.IOException;
impor java.io.InputStream;
impor java.io.PrintWriter;
impor java.util.List;
import java.util.Map;
impor java.util.Vector;
impor javax.imageio.ImageIO;
impor javax.servlet.ServletException;
impor javax.servlet.ServletOutputStream;
impor javax.servlet.http.HttpServlet;
impor javax.servlet.http.HttpServletRequest;
impor javax.servlet.http.HttpServletResponse;
impor com.sun.image.codec.jpeg.JPEGCodec;
impor com.sun.image.codec.jpeg.JPEGImageEncoder;
import com.sun.imageio.plugins.common.ImageUtil;
impor com.webapp.util.CheckCodeImageUtil;
kelas publik UserServlet memperluas HttpServlet {
Daftar pribadi<String> Daftar pengguna;
String pribadi txtFilePath = null;
public void init() melempar ServletException {
txtFilePath = ini.getInitParameter("rulesfilepath");
// Simulasikan basis data
userList = Vektor baru<String>();
userList.add("zhangsan");
userList.add("lisi");
userList.add("wangwu");
userList.add("zhaoliu");
}
public void doGet (permintaan HttpServletRequest, respons HttpServletResponse)
melempar ServletException, IOException {
doPost(permintaan, tanggapan);
}
public void doPost (permintaan HttpServletRequest, respons HttpServletResponse)
melempar ServletException, IOException {
String uri = permintaan.getRequestURI();
Jalur string = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/validatename")){
permintaan.setCharacterEncoding("utf-8");
respon.setContentType("teks/html;charset=utf-8");
mencoba {
Thread.tidur(3000);
} tangkapan (InterruptedException e) {
e.printStackTrace();
}
//Sistem simulasi menghasilkan uji pengecualian
/*jika(1==2){
throw new ServletException("ada kesalahan");
}*/
String nama pengguna = permintaan.getParameter("nama pengguna");
System.out.println("nama pengguna:" + nama pengguna);
//Simulasikan kueri data pengguna
boolean ada = userList.contains(nama pengguna);
jika(ada){
respon.getWriter().print("ada");
}kalau tidak{
respon.getWriter().print("tidak ada");
}
}
if(path.equals("/rulesText")){
permintaan.setCharacterEncoding("utf-8");
respon.setContentType("teks/html;charset=utf-8");
String filePath = ini.getServletContext().getRealPath(txtFilePath);
File file = File baru(filePath);
StringBuffer buffer = StringBuffer baru();
mencoba {
Pembaca BufferedReader = BufferedReader baru (FileReader baru (file));
Tali tmp = "";
while((tmp = pembaca.readLine())!=null){
buffer.append(String baru(tmp.getBytes("gbk"),,"utf8")).append("/n");
}
pembaca.close();
} tangkapan (Pengecualian e) {
e.printStackTrace();
}
if(buffer.toString().trim()!=null){
respon.getWriter().print(buffer.toString());
}
}
if(path.equals("/kode periksa")){
respon.setContentType("gambar/jpeg");
Peta<String, BufferedImage> peta = CheckCodeImageUtil.creatCheckImage();
Kunci string = (String)map.keySet().iterator().next();
request.getSession().setAttribute("kode",kunci);
System.out.println("kode periksa = " + permintaan.getSession().getAttribute("kode"));
Gambar BufferedImage = map.get(kunci);
ImageIO.write(gambar, "jpeg", respon.getOutputStream());
}
}
}