What to do with Ajax requests without using jquery?
First, it is necessary to make certain that some data in HTML needs to be obtained from the server,that is, the client requests the data from the server, and the service side responds to the request (response) and gives the data to the client. The data format returned by the server is varied, that is, it can be a string, or it can be a number, or it can be an object. After the client receives the data, it is displayed on the HTML page after it has been processed on its own request. This processing is given to JavaScript.
JavaScript handles Ajax asynchronous requests with three points to note:
1. Create a new XMLHttpRequest object;
2, create a function to obtain data;
3, create a callback function;
Our goal is to enter a name in the text box to be passed to the server, which, after calculation, displays the data sent back from the server on the current page.
<!DOCTYPE HTML><HTML> <Body> <ahref= "http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/">Ajax Study</a> </BR>Enter your name:<inputtype= "text"ID= "Name"OnChange= "GetInfo ();" /> </BR>Show Ajax return Data:<spanID= "GetInfo"></span> <Scripttype= "Text/javascript"> //JavaScript Ajax //Create a new Request object varRequest=NewXMLHttpRequest (); //Get Data functionGetInfo () {varname=document.getElementById ('name'). Value; varURL="/get_info/"+Escape (name); //Open RequestRequest.open ("GET", URLs,true); //specifying a callback functionRequest.onreadystatechange=Updatepage; //Send request (the sent content is null to indicate through GET request)Request.send (NULL); } //callback function (the server initiates a call to the Web page) functionUpdatepage () {if(Request.readystate==4){ if(Request.status== $){ //Read response text varResponse=Request.responsetext; //The returned text can be processed. If the JSON string is converted to an object for processing. //There are several ways to convert to JSON objects: varJsonobj=Eval ('('+Response+')'); //or: varJsonobj=Json.parse (response); //return data to the pagedocument.getElementById ('GetInfo'). InnerHTML=Jsonobj.name; Alert ('You enter is:'+jsonobj.name); } Else if(Request.status==404) Alert ('request URL does not exist.'); ElseAlert ('error:status code is:' +request.status)}}</Script> </Body></HTML>
Here's
var response=request.responsetext;
The return is a string:
{\ n ' age ': 2,\n "name": "Hello World" \ n} "Service-Side code:
# This shows the info.html page
@app. Route ('/info')def xxx (): return render_template ('info.html')
# This is the action to be performed (must have a route, the HTML page JS needs this URL.) Function name casually up. ）
@app. Route ('/get_info/<name>')defx (name): LS={'name': Name,' Age': 2} returnjsonify (LS)
--End--
JavaScript and Ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
