Introduction to Ajax
Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technology that creates interactive Web applications.
AJAX = Asynchronous JavaScript and XML (a subset of standard generic markup languages).
AJAX is a technique for creating fast-moving web pages.
AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.
Traditional Web pages (without AJAX) if you need to update the content, you must overload the entire page page.
Next step
The first two days XZ asked me if I know how Ajax implements Cross-domain calls, because I haven't heard the concept, so I know how to do it. XZ said that there are several ways of Ajax Cross-domain call, one is the way of the IFRAME, by setting the document.domain to achieve, one is by setting the JSONP to achieve. This two days to check the information, but also wrote a few demo, the following memo.
I built three sites locally and set up a host file to simulate cross domain and Cross-domain
Coolkissbh.com
Blog.coolkissbh.com
Coolkiss.com
First, what's wrong with Ajax Cross-domain calls
Coolkissbh.com the page below using jquery $.get invoke blog.coolkissbh.com page
Cross-domain requests, IE 7 and 8 report access denied error
IE 6.0 pops up this page is accessing information the is isn't under its control. This is poses a security risk.do your want to continue? Prompt box
Firefox doesn't give an error, but doesn't make a request.
Two, the Ajax Cross-domain implementation method
1, cross-domain implementation of Ajax
Requirements: To implement coolkissbh.com page asynchronous request blog.coolkissbh.com under the page
Implementation method: By using the IFRAME, by setting the SRC attribute of the IFRAME, embed a page under blog.coolkissbh.com, such as ajaxproxy.aspx, then request Ajax from the page
After the Ajaxproxy request is completed, the returned data is passed back to the main page of coolkissbh.com through the parent object. Therefore, the true asynchronous request still occurs under the blog.coolkissbh.com domain name
Note: cross-domain AJAX requests implemented in this way require the same domain name to be set on the Coolkissbh.com request page and Ajaxproxy.aspx page, which is
Document.domain = "coolkissbh.com";
Note: The problem with setting domain, if it is across the entire domain, using the above method, Firefox will be prompted
Illegal document.domain value "code:" 1009 Error, so only the second method can be used across the entire domain
Processing the returned data:
Ajaxproxy.aspx the data returned by Ajax to a global variable, coolkissbh.com passes the setinterval to determine whether the page of the IFRAME is loaded or not, and if the load completes, gets the ajaxproxy.aspx global variable value. And then do other processing.
Here is a problem: I originally intended to ajaxproxy.aspx Ajax request completed, call the parent method, while the data back, but in IE, click on the first time will appear "Permission denied" error, again click on the normal. Under Firefox there is no problem, do not know what the reason.
2, implementing Ajax across the entire domain
Requirements: To implement coolkissbh.com page asynchronous request coolkiss.com under the page
Implementation method: It is mentioned above that a domain-wide method cannot be implemented by setting domain methods. However, you can use the script tag to do this by setting the SRC attribute of the script label to a page under the coolkiss.com domain name and uploading the callback function to the page, for example:
Requestajax_crosssite = function () {
var obj = $ ("#crossSitePage");
Obj.attr ("src", "http://coolkiss.com/CrossSite.aspx?callback=handleData3");
}
HANDLEDATA3 = function (data) {
$ ("#ResponseData"). HTML (data);
Crosssite.aspx returns a string that returns the returned data back to callback, executes the callback function, and implements Ajax, for example:
Response.Clear ();
Response.Write (String. Format ("{0} (' {1} ')", request["callback"], responsedata));
Response.End ();
Note: This approach can also be used to deal with problems across subdomain Ajax, but you can't get the various states of Ajax calls like jquery
3, the implementation of Cross-domain Ajax via jquery Jsonp, in fact, is the same as the second approach, which supports cross domain and subdomain
jquery 1.2 Adds a call to Cross-domain Ajax, which is the $.getjson function
The method is invoked as follows:
Below is the page under coolkissbh.com
Use JSONP to implement cross-domain
REQUESTAJAX_JSONP = function () {
var obj = $ ("#crossSitePage");
$.getjson ("http://coolkiss.com/CrossSite.aspx?callback=?&t=" + math.random (), function (data) {
//alert ( data);
$ ("#ResponseData"). HTML (data.content);
});
Coolkiss.com the spooler code to pass a JSON object to callback:
public partial class CrossSite:System.Web.UI.Page
{
protected void Page_Load (object sender, EventArgs e)
{
if (! IsPostBack)
{
loaddata_jsonp ();
}
}
protected void Loaddata_jsonp ()
{
string responsedata = "{content:\" Hello World from Coolkiss.com\ "}";
if (request["callback"]!= null &&!string. IsNullOrEmpty (request["callback"]))
{
response.clear ();
Response.Write (String. Format ("{0} ({1})", request["callback"], ResponseData));
Response.End ();}}
Callback=? which are automatically replaced with the function (data) functions.
The above is a small set to introduce the Ajax Cross-domain how to achieve the relevant knowledge, I hope to help you!