Ajax技术组成与核心原理分析
这篇文章主要介绍了JavaScript性能优化之函数节流（throttle）与函数去抖（debounce），感兴趣的小伙伴们可以参考一下
本文主要为大家分析了Ajax技术组成原理，供大家参考，具体内容如下
1、Ajax
特点：局部刷新、提高用户的体验度，数据从服务器商加载
2、AJax的技术组成
不是新技术，而是之前技术的整合
Ajax: Asynchronous Javascript And Xml;（异步的JavaScript和XML）
包括的技术：JavaScript、XML、CSS、XMLHttpRequest
异步：发送请求以后，不等结果，由回调函数处理。
JavaScript:向服务器发送请求，获得返回结果，更新页面
XML：用来封装数据
3、Ajax核心原理
XMLHttpRequst对象：通过该对象向服务器发送请求。
它是异步请求的技术，所有现代浏览器都支持（Chrome、IE5+）
1)创建XMLHttpReuest对象
非IE浏览器（Mozilla/Safari）：var xhr=new XMLHttpRequest();
IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
低版本IE:xhr=new ActiveXObject("Microsfot.XMLHTTP");
2)XMLHttpRequest对象的属性与方法
a)方法：open("GET/POST",URL,true/false):用来向服务器建立连接
有三个参数:
参数1：提交方式，post或get
参数2：请求的URL
参数3：表示同步或异步请求，true:表示异步请求
false: 表示同步请求
send(data):发送请求
参数：提交的内容。
POST方式:data就是提交的参数，send(username=root&password=abc123);
GET方式:send(null)
b)属性：
onreadystatechange:设置状态改变时的回调函数，回调函数用来获取服务器数据。
onreadystatechange=function(){
｝
readyState:服务器状态响应
状态码：
0：未初始化
1：正在加载
2：加载完成
3：请求进行中
4：请求完成
responseText:服务器返回的数据(文本格式)
responseXML:服务器返回的数据（XML格式）
总结：
使用XMLHttpRequest的步骤：
1)创建XMLHttpRequest对象
2）设置请求的方法及URL
xhr.open("GET/POST","url",true/false),true表示异步请求，false表示同步请求
3)设置状态改变时的回调函数
xhr.onreadystatechange=function(){}
0:未初始化
1:正在加载
2:加载完成
3：请求进行中
4：请求完成
4）发送请求
xhr.send(data),
如果为post提交，则data为提交的数据，如果为get提交，则参数为null即可。
判断用户登录的HTML页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
</head>
<body>
用户名：<input type="text" name="username" id="username"><br>
密码:<input type="password" name="password" id="password">
<a href="javascript:chkUser();">登录</a>
<p id="res"></p>
</body>
<script type="text/javascript">
var xhr;
/**
* 创建XMLHttpRequest对象
*/
function createXMLHttpRequest(){
//1、创建XMLHttpRequest对象
if(window.XMLHttpRequest){
//非IE内核浏览器
xhr=new XMLHttpRequest();
}else{
//IE浏览器
try{
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
//IE低版本
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
/**
* 发送请求，用来检查用户名、密码是否正确
*/
function chkUser(){
//1、创建XMLHttpRequest
createXMLHttpRequest();
//2、获得用户名、密码
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
//3、与服务器建立连接：open
var url="login?username="+username+"&password="+password;
//方式1：get提交
//xhr.open("GET",url,true);
//方式2：post提交
var url2="login";
xhr.open("POST",url2,true);
//4、设置回调函数，获得服务器响应的数据
xhr.onreadystatechange=function(){
/*
readyState状态码：
0：未初始化
1：正在加载
2：加载完成
3：请求进行中
4：请求完成
*/
if(xhr.readyState==4){
//status,200表示响应正常
if(xhr.status==200){
//alert("从服务器返回的值为："+xhr.responseText);
var res=xhr.responseText;
if(res=='0'){
document.getElementById("res").innerHTML="登录成功";
}else{
document.getElementById("res").innerHTML="<font color='red'>登录失败</font>";
}
}else{
alert("出现在了异常:"+xhr.response.Text);
}
}
}
//5、发送请求
//方式1：get方式
//xhr.send(null);
//方式2:post方式：
//Post提交需要设置http请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("username="+username+"&password="+password);
}
</script>
</html>服务端代码：
package com.newer.login.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.newer.login.bean.User;
import com.newer.login.service.UserService;
/**
* Servlet implementation class LoginServlet
*/
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
UserService userService = new UserService();
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 1、获得页面参数
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("获得请求的参数username:"+username);
System.out.println("获得请求的参数password:"+password);
// 2、封装User对象
User user = new User();
user.setUsername(username);
user.setPassword(password);
// 3、调用服务类，完成用户名、密码的校验
User u = userService.login(user);
/*
* 传统方式 if(u!=null){ //表示登录成功 request.setAttribute("user", user);
* //跳转至首页... }else{ //登录失败，跳转登录页面
*
* }
*/
// ajax响应
PrintWriter out = response.getWriter();
if (u != null) {
//0成功，1失败
out.print(0);
}else{
out.print(1);
}
out.close();
}
}上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci Ajax技术组成与核心原理分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Analisis fungsi dan prinsip nohup
Mar 25, 2024 pm 03:24 PM
Analisis peranan dan prinsip nohup Dalam sistem pengendalian seperti Unix dan Unix, nohup ialah arahan yang biasa digunakan yang digunakan untuk menjalankan arahan di latar belakang Walaupun pengguna keluar dari sesi semasa atau menutup tetingkap terminal, arahan itu boleh masih terus dilaksanakan. Dalam artikel ini, kami akan menganalisis fungsi dan prinsip arahan nohup secara terperinci. 1. Peranan nohup: Menjalankan arahan di latar belakang: Melalui arahan nohup, kita boleh membiarkan arahan yang berjalan lama terus dilaksanakan di latar belakang tanpa terjejas oleh pengguna yang keluar dari sesi terminal. Ini perlu dijalankan
Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX
Feb 20, 2024 am 10:07 AM
Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.
Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403
Feb 19, 2024 pm 05:55 PM
jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan pembangunan sisi klien. AJAX ialah teknologi yang menghantar permintaan tak segerak dan berinteraksi dengan pelayan tanpa memuatkan semula keseluruhan halaman web. Walau bagaimanapun, apabila menggunakan jQuery untuk membuat permintaan AJAX, anda kadangkala menghadapi 403 ralat. Ralat 403 biasanya ralat akses yang dinafikan pelayan, mungkin disebabkan oleh dasar keselamatan atau isu kebenaran. Dalam artikel ini, kami akan membincangkan cara menyelesaikan permintaan jQueryAJAX yang menghadapi ralat 403
Perbincangan mendalam tentang prinsip dan amalan rangka kerja Struts
Feb 18, 2024 pm 06:10 PM
Analisis prinsip dan penerokaan praktikal rangka kerja Struts Sebagai rangka kerja MVC yang biasa digunakan dalam pembangunan JavaWeb, rangka kerja Struts mempunyai corak reka bentuk dan skalabiliti yang baik dan digunakan secara meluas dalam pembangunan aplikasi peringkat perusahaan. Artikel ini akan menganalisis prinsip rangka kerja Struts dan menerokanya dengan contoh kod sebenar untuk membantu pembaca memahami dan menggunakan rangka kerja itu dengan lebih baik. 1. Analisis prinsip rangka kerja Struts 1. Seni bina MVC Rangka kerja Struts adalah berdasarkan MVC (Model-View-Con
Pemahaman mendalam tentang prinsip pelaksanaan Insert batch dalam MyBatis
Feb 21, 2024 pm 04:42 PM
MyBatis ialah rangka kerja lapisan ketekunan Java yang popular yang digunakan secara meluas dalam pelbagai projek Java. Antaranya, sisipan kelompok adalah operasi biasa yang boleh meningkatkan prestasi operasi pangkalan data dengan berkesan. Artikel ini akan meneroka secara mendalam prinsip pelaksanaan Sisipan kelompok dalam MyBatis, dan menganalisisnya secara terperinci dengan contoh kod khusus. Sisipan Batch dalam MyBatis Dalam MyBatis, operasi Sisipan kelompok biasanya dilaksanakan menggunakan SQL dinamik. Dengan membina S yang mengandungi berbilang nilai yang dimasukkan
Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?
Mar 09, 2024 pm 05:36 PM
Menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP adalah senario biasa dalam pembangunan web Melalui Ajax, halaman boleh diperoleh secara dinamik tanpa menyegarkan data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP, dan memberikan contoh kod khusus. Pertama, kita perlu menulis fail PHP untuk mengendalikan permintaan Ajax dan mengembalikan pembolehubah yang diperlukan. Berikut ialah kod contoh untuk fail PHP mudah getData.php:
Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403?
Feb 23, 2024 pm 04:27 PM
Bagaimana untuk menyelesaikan masalah jQueryAJAX ralat 403? Apabila membangunkan aplikasi web, jQuery sering digunakan untuk menghantar permintaan tak segerak. Walau bagaimanapun, kadangkala anda mungkin menghadapi kod ralat 403 apabila menggunakan jQueryAJAX, menunjukkan bahawa akses dilarang oleh pelayan. Ini biasanya disebabkan oleh tetapan keselamatan bahagian pelayan, tetapi terdapat cara untuk mengatasinya. Artikel ini akan memperkenalkan cara menyelesaikan masalah ralat jQueryAJAX 403 dan memberikan contoh kod khusus. 1. membuat
Penjelasan terperinci tentang prinsip pemalam paging MyBatis
Feb 22, 2024 pm 03:42 PM
MyBatis ialah rangka kerja lapisan kegigihan yang sangat baik yang menyokong operasi pangkalan data berdasarkan XML dan anotasi Ia mudah dan mudah digunakan, dan juga menyediakan mekanisme pemalam yang kaya. Antaranya, pemalam paging adalah salah satu pemalam yang lebih kerap digunakan. Artikel ini akan menyelidiki prinsip pemalam paging MyBatis dan menggambarkannya dengan contoh kod khusus. 1. Prinsip pemalam paging MyBatis sendiri tidak menyediakan fungsi paging asli, tetapi anda boleh menggunakan pemalam untuk melaksanakan pertanyaan paging. Prinsip pemalam paging adalah terutamanya untuk memintas MyBatis
