Getting Started with Ajax (i) starting from 0 to a successful GET request

What is server Web browsing process analysis

A complete HTTP request process, usually with the following 7 steps

1. Establish a TCP connection
2. Web browser sends request command to Web server
3. Web browser sends request header information
4. Web server-Answer
5. Web server-Send Answer header information
6. Web server-sending data to the browser

7. Web server-Close TCP connections

   How to configure your own server program (AMP)

   Ajax must be in a server environment for normal use

• I use the Wampserver program. (Support Chinese) website connection. May not speed, but science online, we should all.
• Use the Web Tutorial: How to Install and use
• xampp– I tried, or wamp simple, everyone is interested to test their own
• It is recommended to use the Firefox browser for Ajax debugging.

Ajax Principles

What is Ajax?

• No flush data Read
  • User Registration/Online chat room
  • Understand both synchronous and asynchronous (basic with asynchronous requests).

    Sync: Client initiated request – waits for –> server-side processing-waits for –> response –> page load (all reload when request error).
    Async: Client initiated request, server-side processing--page loading (when filling out, immediate updating, partial return).

HTTP request

• An HTTP request is typically made up of four parts
  1. The method or action of the HTTP request GET is or is POST requested
  2. The URL being requested, always know what the requested address is, right?
  3. The request header, which contains some client environment information, authentication information, etc.
  4. The request body, which is the request body, can contain the query string information submitted by the client, form information, and so on.

HTTP response

• An HTTP response is typically made up of three parts:
  1. A number and text -based status code to show whether the request succeeded or failed
  2. The response header, like the response header and the request header, contains many useful information, such as server type, datetime, content type, and length.
  3. The response body, which is the response body.

HTTP request mode

GET	POST
For information acquisition/querying (e.g. browsing posts)	Used to modify resources on the server (e.g., user registration)
Low security (visible with pass-through url parameter owner)	General security (at least not visible)
Low capacity (2000 characters)	Virtually unlimited capacity

Common HTTP status Codes

Status Code	Description	reason Phrases
200	The request was successful. Generally used for Get and post methods	Ok
301	Resource Movement. The requested resource is moved to a new URL, and the browser automatically jumps to the new URL	Moved Permanently
304	Not modified. Read cache data not modified by requested resource	Not Modified
400	Request syntax error, server does not understand	Bad Request
404	No resources found, you can set the personality "404 Page"	Not Found
500	Server Internal Error	Internal Server Error

Writing Ajax

analogy Call Understanding Ajax writing steps

Call	Ajax Requests
1. Call	1. Creating an Ajax Object
2. Dialing	2. Connect to the server
3. Establish a connection	3. Sending the request
4. Listen	4. Accept the return

1. Creating an Ajax Object

• IE6: ActiveXObject("Microsoft.XMLHTTP") //ie6 is dead, can not consider
• XMLHttpRequest();

Cases:var request = new XMLHttpRequest();

2. Connect to the server

• open(method,url,async);
• Open (Send Request Method "Get/post", (Request Address "file name"), whether asynchronous transfer)

Cases:request.open("GET","get.json",true);

3. Sending the request

• send(string)
  • GETno need to fill in parameters when using the method request
  • When used POST , the parameter represents the data sent to the server

1 2 3 4 5 6 7 8 9 10

A complete GET request var Oajax =New XMLHttpRequest ();Creating an Ajax Object Oajax.open ("GET", "create.php", true); //connection server oajax.send (); //full post send request var oajax = new xmlhttprequest (); Create oajax.open ( "POST", true); //"POST" oajax.setrequestheader ( "Content-type ", " application/x-www-form-urlencoded "); //set HTTP header information. There must be between open and send, otherwise an exception occurs. oajax.send ( "Name= Chen two dog &sex= male");

4. Receive return-Request status monitoring

• Xmlhttprequset Get a response

Properties	value
responseText	Get response data in string form
responseXML	Get the response data in XML form
statusAndstatusText	Returns the HTTP status code in numeric and textual form
getAllResponseHeader()	Get all the response headers
getResponseheader()	The value of a field in a query response

• onreadystatechangeEvent

  onreadystatechangethe state of the request is judged by listening for events.

• readyStateProperty: Response Returns the state

Status Code	Status	where you are
0	(uninitialized)	Method not yet called open()
1	(load)	Called send() method, sending request
2	(Loading completed)	send()Method completed, received full response content
3	Resolution	Parsing response Content
4	Complete	The response content resolution is complete and can be called by the client

Cases:

1 2 3 4 5 6 7 8 9 10 11 12

A basic and complete Ajax request var request = new xmlhttprequest (); request.open ( "GET", true); request.onreadystatechange = function ( if (request.readystate = = 4) { if (request.status = = 200) { //response success, do something } else { Span class= "line" > //response failed, do something } }; /span>

Use a function to encapsulate a GET request simply

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

/** * A simple asynchronous GET request *@param {String} URL request address, file name *A function that executes when the request succeeds @param {function} FNSUCC, and the parameter is the string value to get. *@param {Function} Fnfaild the request failed to execute, optional parameters */ functionGet(URL, fnsucc, fnfaild) { 1. Creating an Ajax Object var Oajax =Null The window must be used here as a property of the Window object. Does not exist is the value of undefined, enter the else/if the direct use of XMLHttpRequest without support will be an error if (window. XMLHttpRequest) { Oajax =New XMLHttpRequest (); }else { IE6 above, it should not be considered IE6 now. Oajax =New ActiveXObject ("Microsoft.XMLHTTP"); } 2. Connect to the server Open (method, URL, whether asynchronous) Oajax.open ("GET", URL,true); 3. Sending the request Oajax.send (); //4. Receive back // Onredaystatechange Event Oajax.onreadystatechange = function () { if ( Oajax.readystate = = = 4) { if (oajax.status = = Span class= "number" >200) { FNSUCC (oajax.responsetext); else { if (fnfaild) { Span class= "line" > Fnfaild (); " /span>

Using AJAX Basics: Requesting and displaying a static TXT file

• Character Set encoding: garbled when inconsistent
• Cache, block cache, (add with Time object)

Dynamic Data: Request JS (or JSON) files

Note: Not recommended, not recommended eval eval , and not eval recommended for use. Because Eval parses the data, a series of problems arise. This is because it is just learning to feel free to point.
When you need to parse the request data, it is recommended that you use JSON to JSON.parse() parse a JSON string into a JavaScript value. Reference Mdn-json

• evalThe use
  Cases:

1 2 3 4 5 6 7 8 9 10

"54-8*6+4"; Alert (//10; eval (str1); Alert (arr[1]); 2 "Function Show () {alert (' abc ');}"; eval (STR3); Abc

A successful GET request

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

A Get function has been introduced The data file is placed in a sibling directory. Get"Json.js",function (str) { var arr = Span class= "built_in" >eval (str); alert (Arr[0].a); function ( alert ( "Server request failed!"); }); //json.js the file as follows /* [{ A:12, B:5 */ //when the server responds successfully, it will return a.

• DOMCreating elements
  • Partial refresh: Requests and displays some Web page files, using for loops.
  • Here is the scope of the DOM operation, here is not too much to tell.

from:http://guowenfh.github.io/2015/12/18/ajax-elementary-course-1/

Getting Started with Ajax (i) starting from 0 to a successful GET request