Shulou(Shulou.com)06/03 Report--

This article will explain in detail what the role of Ajax is for you. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Introduction to ajax

AJAX, namely "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), refers to a web page development technology that creates interactive web page applications. Ajax is not a new programming language, but a new way to use existing standards. AJAX can exchange data with the server without reloading the entire page. This asynchronous interaction allows users to get new data without having to refresh the page after clicking. With Ajax, users can create a direct, highly available, richer, and more dynamic Web user interface close to local desktop applications.

Ajax includes:

XHTML and CSS

Dynamic display and interaction using document object Model (Document Object Model)

Use XML and XSLT for data exchange and operation

Asynchronous data reception using XMLHttpRequest

With AJAX, you can do:

When registering, entering the user name automatically detects whether the user already exists.

When logging in, prompt the user name and password is wrong

When deleting a data row, the row ID is sent to the background, which is deleted in the database. After the database is deleted successfully, the data row is also deleted in the page DOM.

Ajax forgery

Iframe is our commonly used iframe tag:. Iframe tag is a form of framework, but also more commonly used, iframe is generally used to contain other pages, for example, we can load the content of other sites or other pages of our site in our own website pages. The biggest function of the iframe tag is to make the page beautiful. There are many uses of iframe tags, the main difference is in the form of definition of iframe tags, such as defining the length, width and height of iframe.

Therefore, the iframe tag has the feature of partially loading content, so it can be used to spoof Ajax requests.

Fake AJAX

Please enter the address to load:

Function GetXHR () {var xhr = null; if (XMLHttpRequest) {xhr = new XMLHttpRequest ();} else {xhr = new ActiveXObject ("Microsoft.XMLHTTP");} return xhr;} function XmlGetRequest () {var xhr = GetXHR () / / define the callback function xhr.onreadystatechange = function () {if (xhr.readyState = = 4) {/ / have received all the response data, do the following: var data = xhr.responseText; console.log (data);}} / / specify connection method and address-File xhr.open ('get', "/ test/", true); / / send request xhr.send ();}

III. Post request

The POST request is used to send data to the server that should be saved. The body of a POST request can contain a very large amount of data in unlimited format.

POST XMLHttpRequest-Ajax request

Function JXmlSendRequest () {$.ajax ({url: "http://c2.com:8000/test/", / / access url address type: 'GET', / / get way to submit dataType:' text', / / data type success: function (data, statusText) XmlHttpRequest) {/ / the result returned after success console.log (data) })}

Cross-domain ajax

Because the browser has a same-origin policy mechanism, the same-origin policy prevents documents or scripts loaded from one source from getting or setting the properties of documents loaded from another source. Therefore, ajax itself can not cross-domain, by generating a script tag to achieve cross-domain. Because the src attribute of the script tag has no cross-domain restrictions.

The browser same origin policy does not restrict all requests:

Constraints: XmlHttpRequest

No restriction: tags with src attributes such as img, iframe, script, etc.

Note: if you simulate cross-domain, you need to add two domain names to the host file of your computer. What I add here are zhangyanlin.com and aylin.com domain names.

1. JSONP implements cross-domain requests

JSONP is an unofficial protocol that allows integration of Script tags on the server side to return to the client side to achieve cross-domain access in the form of javascript callback. Jsonp can only make cross-domain requests through get.

Title function func (arg) {console.log (arg) / / the output result is the list of python code passed over [11pjong 22j33,]} function DoAjax () {$.ajax ({url: 'http://alex.com:8002/index', type:' POST', data: {'K1codes:' v1'}, success: function (arg) {console.log (arg);}})) } function JsonpAjax () {/ / var tag = document.createElement ('script'); / / tag.src = "http://alex.com:8002/index";// document.head.appendChild (tag); / / document.head.removeChild (tag) $.ajax ({url: "http://aylin.com:8002/index", dataType: 'jsonp', jsonpCallBack:' func' / / a pair returns the function name, and the function receives the content})}

Functions can be defined in the aylin.com domain name.

# class IndexHandler (tornado.web.RequestHandler) using pythontornado framework: def get (self): self.write ('func ([11pje 22dj33]);') def post (self, * args, * * kwargs): self.write ('t2.post')

Here, jsonp uses the src of the script tag to make cross-domain requests

II. CORS

The above method mentioned that the same origin policy of the browser makes it impossible for ajax to transfer across domains, so this method can break through the browser restrictions to transfer. When the data is sent to the other party's domain name, the other party has received it, but when it is returned, it is blocked by the browser. We can write a string similar to the ID card and pass the browser's pre-check to achieve the data transmission.

This aspect is divided into simple requests and non-simple requests.

Conditions: 1. Request method: HEAD, GET, POST 2, request header information: the corresponding value of Accept Accept-Language Content-Language Last-Event-ID Content-Type is any of the following three application/x-www-form-urlencoded multipart/form-data text/plain Note: if both conditions are met, it is a simple request, otherwise it is a complex request

Simple requests are only one request, while complex requests are two requests. One request is sent for "pre-check" before the data is sent, and another request is sent for data transmission only after the "pre-check" is passed.

Implement AJAX request based on cors:

1. Support cross-domain and simple requests

Server settings response header: Access-Control-Allow-Origin = 'domain name' or'*'

Function XmlSendRequest () {var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () {if (xhr.readyState = = 4) {var result = xhr.responseText; console.log (result);}}; xhr.open ('GET', "http://c2.com:8000/test/", true); xhr.send () } function JqSendRequest () {$.ajax ({url: "http://c2.com:8000/test/", type: 'GET', dataType:' text', success: function (data, statusText, xmlHttpRequest) {console.log (data)) }})} class MainHandler (tornado.web.RequestHandler): def get (self): self.set_header ('Access-Control-Allow-Origin', "http://www.xxx.com") self.write (' {" status ": true," data ":" seven "}')

2. Support cross-domain and complex requests

Because when a complex request is made, a "pre-check" request is sent first, and if the "pre-check" is successful, the real data is sent.

When a "pre-check" request is allowed, the server needs to set the response header: Access-Control-Request-Method

When a "pre-check" request is made, to allow the request header, the server needs to set the response header: Access-Control-Request-Headers

"pre-check" cache time, server sets response header: Access-Control-Max-Age

Function XmlSendRequest () {var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () {if (xhr.readyState = = 4) {var result = xhr.responseText; console.log (result);}}; xhr.open ('PUT', "http://aylin.com:8000/test/", true); xhr.setRequestHeader (' K1Qing, 'v1'); xhr.send () } function JqSendRequest () {$.ajax ({url: "http://aylin.com:8000/test/", type: 'PUT', dataType:' text', headers: {'K1girls:' v1'}, success: function (data, statusText, xmlHttpRequest) {console.log (data) }})} class MainHandler (tornado.web.RequestHandler): def put (self): self.set_header ('Access-Control-Allow-Origin', "http://www.xxx.com") self.write (' {" status ": true," data ":" seven "}') def options (self, * args, * * kwargs): self.set_header ('Access-Control-Allow-Origin' "http://www.xxx.com") self.set_header ('Access-Control-Allow-Headers'," K1 PUT,DELETE K2 ") self.set_header (' Access-Control-Allow-Methods'," PUT,DELETE ") self.set_header ('Access-Control-Max-Age', 10)

3. Cross-domain transmission cookie

In cross-domain requests, by default, HTTP Authentication information, Cookie headers, and the user's SSL certificate are not sent either in the pre-check request or in the actual request.

If you want to send:

Browser side: the withCredentials of XMLHttpRequest is true

Server side: Access-Control-Allow-Credentials is true

Note: the Access-Control-Allow-Origin of the server-side response cannot be a wildcard *

Function XmlSendRequest () {var xhr = new XMLHttpRequest (); xhr.onreadystatechange = function () {if (xhr.readyState = = 4) {var result = xhr.responseText; console.log (result);}}; xhr.withCredentials = true; xhr.open ('PUT', "http://aylin.com:8000/test/", true); xhr.setRequestHeader (' K1Qing, 'v1') Xhr.send ();} function JqSendRequest () {$.ajax ({url: "http://aylin.com:8000/test/", type: 'PUT', dataType:' text', headers: {'K1girls:' v1'}, xhrFields: {withCredentials: true}, success: function (data, statusText, xmlHttpRequest) {console.log (data) }})} class MainHandler (tornado.web.RequestHandler): def put (self): self.set_header ('Access-Control-Allow-Origin', "http://www.xxx.com") self.set_header (' Access-Control-Allow-Credentials'," true ") self.set_header ('xxoo'," seven ") self.set_header (' zhangyanlinhenshuai' "feichangshuai") self.set_header ('Access-Control-Expose-Headers', "shuai,shuaishuai") self.set_cookie (' kkkkk', 'vvvvv') Self.write ('{"status": true, "data": "seven"}') def options (self, * args, * * kwargs): self.set_header ('Access-Control-Allow-Origin', "http://www.xxx.com") self.set_header (' Access-Control-Allow-Headers'," K1 Magi K2 ") self.set_header ('Access-Control-Allow-Methods'," PUT DELETE ") self.set_header ('Access-Control-Max-Age', 10) this is the end of the article on" what is the use of Ajax "? Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.