码迷,mamicode.com
首页 > Web开发 > 详细

Ajax基本知识(一)

时间:2016-04-27 00:13:59      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:

What‘s AJAX?

Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files. Ajax‘s most appealing characteristic, however, is its "asynchronous" nature, which means it can do all of this without having to refresh the page. This lets you update portions of a page based upon user events.

The two features in question are that you can:

  Make requests to the server without reloading the page

  Receive and work with data from the server

Step 1 – How to make an HTTP request

In order to make an HTTP request to the server using JavaScript, you need an instance of a class that provides this functionality. This is where XMLHttpRequest comes in.

// Old compatibility code, no longer needed.
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

Next, you need to decide what you want to do after you recive the server response to your request. At this stage, you just need to tell the HTTP request object which JavaScript function will handle processing the response. This is done by setting the onreadystatechange property of the object to the name of the JavaScript function that should be called when the state of the request changes.

httpRequest.onreadystatechange = nameOfTheFunction;

Note that there are no parentheses after the function name and no parameters passed, because you‘re simply assigning a reference to the function, rather than actually calling it. Also, instead of giving a function name, you can use the JavaScript technique of defining functions on the fly (called "anonymous functions") and define the actions that will process the response right away, like this:

httpRequest.onreadystatechange = function(){
    // process the server response
};

Next, after you‘ve declared what will happen as soon as you receive the response, you need to actually make the request. You need to call the open() and send() methods of the HTTP request class, like this:

httpRequest.open(‘GET‘, ‘http://www.example.org/some.file‘, true);
httpRequest.send(null);

Note that if you want to POST data, you may have to set the MIME type of the request. For example, use the following line before calling send() for form data sent as a query string:

httpRequest.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);1

 

Ajax基本知识(一)

标签:

原文地址:http://www.cnblogs.com/guojunru/p/5437100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!