Home > Article > Web Front-end > A must-read analysis of Ajax technology components and core principles for beginners
This time I will bring you the analysis of Ajax technology composition and core principles that novices must read. What are the precautions that novices must read about Ajax technology composition and core principle analysis. The following is a practical case, let’s take a look together. take a look.
This article mainly analyzes the composition principles of Ajax technology for your reference. The specific content is as follows
1. Ajax
##Features: Partial refresh, improve user experience, data is loaded from the server provider
2. The technical composition of AJax is not a new technology, but the integration of previous technologiesAjax: Asynchronous
Javascript And ##Callback functionProcessing.
JavaScript: Send a request to the server, get the return result, and update the page
XML: Used to encapsulate data
3. Ajax core principle
XMLHttpRequst object: Use this object to send data to the server send request.
1) Create XMLHttpReuest object
Non-
(Mozilla /Safari): var xhr=new XMLHttpRequest();IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");Low version IE:xhr=new ActiveXObject("Microsfot.XMLHTTP"); 2) Properties and methods of XMLHttpRequest object
a) Method: open("GET/POST", URL, true/false): used to establish a connection to the server
There are three parameters:
Parameter 1: Submission method, post or get Parameter 2: Requested URL Parameter 3: Indicates synchronous or asynchronous request, true: indicates asynchronous request
false: Indicates synchronous request
send(data) :Send request
Parameters: Submitted content.
POST method: data is the submitted parameter, send(username=root&password=abc123);
GET method: send(null)
b) Attribute:
onreadystatechange: Set when the state changes The callback function is used to obtain server data.
onreadystatechange=function(){
readyState: Server status response
Status code:
1: Loading
2: Loading completed 3: Request in progress 4: Request completed
responseText: Data returned by the server (text format)
responseXML: Data returned by the server (XML format)
Summary:
1) Create an XMLHttpRequest object 2) Set the request method and URL xhr.open("GET/POST ","url",true/false), true indicates an asynchronous request, false indicates a synchronous request
3) Set the callback function when the state changes
xhr.onreadystatechange=function(){}
0: Not Initialization
1: Loading
2: Loading completed
3: Request in progress
4) Request completed
4) Send request
xhr.send(data),
If submitted for post, data is the submitted data. If submitted for get, the parameter is null.
Judgement
User login
HTML page:
<%@ 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>
Recommended reading:
Detailed explanation of the use of Ajax asynchronous loadingUse ajax to verify whether the registered user name exists
The above is the detailed content of A must-read analysis of Ajax technology components and core principles for beginners. For more information, please follow other related articles on the PHP Chinese website!