Introduction to the original js ajax creation method (XMLHttpRequest)

Before jquery appeared, we had to use XMLHttpRequest to Create ajax before creating ajax. Next I will take out the ajax I wrote many years ago.

XMLHttpRequest

The Code is as follows:

Copy code

<Script type = "text/javascript"> Function loadXMLDoc () { Var xmlhttp; If (window. XMLHttpRequest) {// Code for IE7 +, Firefox, Chrome, Opera, Safari Xmlhttp = new XMLHttpRequest (); } Else {// Code for IE6, IE5 Xmlhttp = new ActiveXObject ("Microsoft. XMLHTTP "); } Xmlhttp. onreadystatechange = function () { If (xmlhttp. readyState = 4 & xmlhttp. status = 200) { Document. getElementById ("txtHint"). innerHTML = xmlhttp. responseText; } } Xmlhttp. open ("GET", "filefunction. php? Dt=attatchment&u=abc.txt ", true ); Xmlhttp. send (); } </Script>

Next let's take a look at jquery + ajax/"target =" _ blank "> jquery ajax applications

JQuery Ajax events

Ajax requests Generate several different events. We can subscribe to these events and process our logic in them. There are two types of Ajax events in jQuery: local events and global events.

Partial events are defined in the method for each Ajax request. For example:

The Code is as follows:	Copy code
$. Ajax ({ BeforeSend: function (){ // Handle the beforeSend event }, Complete: function (){ // Handle the complete event } //... });

At the same time, we can also directly use

JQuery. get (url, [data], [callback]): Use the GET Method for asynchronous requests.

Load (url, [data], [callback]): load the remote HTML file code and insert it into the DOM.

JQuery. post (url, [data], [callback], [type]): Use the POST method for asynchronous requests.

These are all very good, only suitable for a small amount of input. If there are a large number of, we must use the ajax-serialize () method, as shown below:

The Code is as follows:

Copy code

Html <Form method = "post" id = "submitform" name = "submitform"> <tr> <Td> <table width = "100%" border = "0" cellspacing = "0" cellpadding = "0"> <Tr> <Td width = "6%"> mobile phone: </td> <Td width = "21%"> <input name = "mo" type = "text" class = "Indium" id = "mo" size = "17"/> </td> <Td width = "8%" align = "right"> Email: </td> <Td width = "21%"> <input name = "email" type = "text" class = "Indium" id = "email" size = "17"/> </td> <Td width = "44%"> <span class = "gray"> </span> </td> </Tr> </Table> </td> </Tr> <Tr> <Td height = "90" align = "left"> <Textarea name = "bak" cols = "80" rows = "5" class = "lab" id = "bak1"> </textarea> </td> </Tr> <Tr> <Td> <input name = "button" type = "button" class = "but" id = "buttonajax" value = "Submit a message"/> <Span class = "gray"> </span> </td> </Tr> </Form> $ ('# Buttonajax'). click (function (){ // Alert ($ (this). val ()); // Checkem (); Var postData = $ ('# submitform'). serialize (); // Alert (postData ); $. Ajax ({ Type: "POST ", Url: "/postajax. php ", Data: postData, Success: function (msg ){ // Alert (msg ); If (msg = 1 ){ Alert ('your problem has been submitted successfully! '); } } }); })