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

This article mainly shows you "what are the core framework functions of Ajax", the content is simple and clear, and I hope it can help you solve your doubts. Let me lead you to study and learn what are the core framework functions of Ajax.

The core ajax (options) function includes establishing xmlhttprequest, extracting data, judging whether the reply is successful or not, which basically meets the daily needs.

/ / A generic function for performming AJAX requests

/ / It takes one argument, which is an object that contains a set of options

/ / All of which are outline in the comments, below

Function ajax (options) {

/ / Load the options object with defaults, if no

/ / values were provided by the user

Options = {

/ / The type of HTTP Request

Type: options.type | | "POST"

/ / The URL the request will be made to

Url: options.url | | "

/ / How long to wait before considering the request to be a timeout

Timeout: options.timeout | | 5000

/ / Functions to call when the request fails, succeeds

/ / or completes (either fail or succeed)

OnComplete: options.onComplete | | function () {}

OnError: options.onError | | function () {}

OnSuccess: options.onSuccess | | function () {}

/ / The data type that'll be returned from the server

/ / the default is simply to determine what data was returned from the

/ / and act accordingly.

Data: options.data | | "

}

/ / Create the request object

Var xml = new XMLHttpRequest ()

/ / Open the asynchronous POST request

/ xml.open ("GET", "/ some/url.cgi", true)

Xml.open ("GET", options.url, true)

/ / We're going to wait for a request for 5 seconds, before giving up

Var timeoutLength = 5000

/ / Keep track of when the request has been succesfully completed

Var requestDone = false

/ / Initalize a callback which will fire 5 seconds from now, cancelling

/ / the request (if it has not already occurred).

SetTimeout (function () {

RequestDone = true

}, timeoutLength)

/ / Watch for when the state of the document gets updated

Xml.onreadystatechange = function () {

/ / Wait until the data is fully loaded

/ / and make sure that the request hasn't already timed out

If (xml.readyState = = 4 & &! requestDone) {

/ / Check to see if the request was successful

If (httpSuccess (xml)) {

/ / Execute the success callback with the data returned from the server

Options.onSuccess (httpData (xml, options.type))

/ / Otherwise, an error occurred, so execute the error callback

} else {

Options.onError ()

}

/ / Call the completion callback

Options.onComplete ()

/ / Clean up after ourselves, to avoid memory leaks

Xml = null

}

}

/ / Establish the connection to the server

Xml.send ()

/ / Determine the success of the HTTP response

Function httpSuccess (r) {

Try {

/ / If no server status is provided, and we're actually

/ / requesting a local file, then it was successful

Return! r.status & & location.protocol = "file:" | |

/ / Any status in the 200 range is good

(r.status > = 200 & & r.status

< 300 ) || // Successful if the document has not been modified r.status == 304 || // Safari returns an empty status if the file has not been modified navigator.userAgent.indexOf("Safari") >

= 0 & & typeof r.status = = "undefined"

} catch (e) {}

/ / If checking the status failed, then assume that the request failed too

Return false

}

/ / Extract the correct data from the HTTP response

Function httpData (rjue type) {

/ / Get the content-type header

Var ct = r.getResponseHeader ("content-type")

/ / If no default type was provided, determine if some

/ / form of XML was returned from the server

Var data =! type & & ct & & ct.indexOf ("xml") > = 0

/ / Get the XML Document object if XML was returned from

/ / the server, otherwise return the text contents returned by the server

Data = type = = "xml" | | data? R.responseXML: r.responseText

/ / If the specified type is "script", execute the returned text

/ / response as if it was JavaScript

If (type = = "script")

Eval.call (window, data)

/ / Return the response data (either an XML Document or a text string)

Return data

}

}

In the same directory, we can create a rss.xml file and use this function to access it.

Rss.xml is as follows:

The copy code is as follows:

Fate

The moon

Fate moon

Create another html document, call it, and you can see that the contents of the rss.xml can be accessed.

If you look at it as a whole, it's really simple and simple. Not only can access files in xml format, but also files in html,.js format can be called.

All of these can be created locally and called, and all can be realized.

These are all the contents of the article "what are the core framework functions of Ajax?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.