Learn what you need to know before you use Ajax

Before learning to use Ajax, there are a few things that are necessary:

1, HTML

2, DHTML, is Dynamic HTML, here may be used to document.getElementById ([id]) method, or use Window.id.value=[value] and so on, if not familiar with, see the following example, If you are not able to understand, and then search the Internet, this explanation is too much can not be more.

3, Javascript. This is very important, because a lot of things need to be done through this.

4, DOM. This is not necessary, even if we do not know this thing, still can use Javascrit to do a lot of things.

5, database operation and SQL knowledge. Now many applications are dealing with the database, common user name information, etc., are placed in the database.

The following is the point, this example is very simple, using JSP to achieve user input users are in the database, and give corresponding hints, the so-called "though small, spite", the other play is in this direction to play development.

There are three files in total, two JSP faces, one for foreground display, one for determining whether a user exists, and another Java page for making a database connection.

Note: Please note the comments in it, which is very helpful for you to understand

Foreground display: index.jsp

<title></title>
<script language= "JavaScript" >
var HttpRequest;
/**
The following function can return a httprequest that is suitable for any browser, with the following steps:
1. Try to create a xmlhttprequest () example that can be adapted for all browsers except Microsoft
2. To increase the error judgment, if the current browser is Microsoft, then create a browser suitable for Microsoft
3. But Microsoft's browser has another two versions, but it is said that Microsoft has increased its support for XMLHttpRequest () in 7.0
4. But this also needs to support the original browser, or you write the program those with the old version of the browser is not to see
to the effect.
*/
function Createrequest ()
{
try{
Request=new XMLHttpRequest ();
}catch (Trymicrosoft)
{
try{
Request=new ActiveXObject ("msxml2.xmlhttp");
}catch (Othermicrosoft)
{
try{
Request=new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (Failed)
{
Request=false;
}
}
}
if (!request)
{
Alert ("Err happend!");
return null;
}
return request;
}
/**
This function is the user's action all triggered functions, such as the following onblur (), will call the function
The following steps are:
1. Get the data you need from the HTML page, you can document.getElementById ("") method.
2. Create the required URL, which is and in the form inside method for get and submit submitted in the Address bar
It's the same inside.
3. Open the connection to the server, which has three necessary parameters, although the document has only two rules, but I
People think it's best to use three,
The first one can be get,post or post, but the most common is the previous two, and it is best to use uppercase, because
For some browsers such as Firefox may be an error,
The second is the URL of the call, which is sure you must.
The third is true, which is seen below, which can be false. True indicates synchronous processing, which you can do after submitting
The other thing, this is Ajax inside a, that is asynchronous; If False, then you have to wait for the server to return
Back to be able to do other things.
4. Wait until the server completes and is sure to return the prompt to perform the proper execution, and we can do what we want to do below
Things. These things have to be done through JavaScript, because the only use of XMLHttpRequest
Is the result of sending a request and receiving the server's response.
5. After the completion of the above, you can use the Send () method to the server to send you the information you need to send, its parameters
Can be of any type, the data format sent must be in such a format:
Name=value&anothername=othervalue&so=on, if you want to transfer data, you must change the MIME type:
Httprequest.setrequestheader (' Content-type ', ' application/x-www-form-urnlencoded ');
Otherwise the server will discard the sent data.
*/
function Getbackinfo ()
{
var Username=document.getelementbyid ("username"). Value;
var url= ' checkuser.jsp? Username= ' +username;
Request.open ("Get", url, "true");
The following is equivalent to an implicit loop, in which the function is to be processed only after the data has been received.
onReadyStateChange has 5 values:
0: not initialized
1: Initialization
2: Send data
3: Receive the data
4: The data received complete
Also note that when registering the callback function onreadystatechange, the following function is not able to take parameters
The following disresult is a function that cannot be taken with a parameter.
The reqeust.onreadystatechange=disresult;//recessive cycle
Request.send (NULL);
}
function Disresult ()
{
/**
1. Be sure to determine the completion state of the readystate==4 to do the following things, or you will be in the establishment of the connection that readystate==1
Time to start, and then in readystate==2, Readystate==3,readystate==4 will be executed, do not believe
You can try the alert ("") with a message.
2. Server notification completed, and also to ensure that the correct completion of the results we need to be able to continue, here
Common response codes are:
200: Successful execution
401: Not authorized
403: Prohibition
404: No Files Found
*/
if (request.readystate==4)
{
if (request.status==200)
{
Everything's OK, so it's time to use JavaScript to perform the action you want.
document.getElementById ("Discheckresult"). Value=request.responsetext;
Alert (' Done ');
}
Else
{
Alert (' Something wrong has happend! ');
}
}
}
</script>
<body>
<form>
<table>
<tr>
<td>
<input type=text id= "username" onblur= "Getbackinfo" (); " >
</td>
<td>
<dd id= "Discheckresult" > Where to display results after execution </dd>
</td>
</tr>
</table>
</form>
</body>