JQuery Study Notes [Ajax] (6-1)

1). Implement Ajax functions using traditional JavaScript methods

Var objXmlHttp = null; // declare an empty XMLHTTP variable

        function CreateXMLHTTP() {

// Returns the object of the Variable Based on the browser.

            if (window.ActiveXObject) {

                objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

            } else {

                if (window.XMLHttpRequest) {

                    objXmlHttp = new XMLHttpRequest();

                }

                else {

Alert ("XMLHTTP initialization error! ");

                }

            }

        }

        function GetSendData() {

Document. getElementById ("divTip "). innerHTML = " "; // initialize the content.

Var strSendUrl = "6-1b.html? Date = "+ Date (); // set the Sending address variable and assign the Initial Value

CreateXMLHTTP (); // instantiate the XMLHttpRequest object

ObjXmlHttp. open ("GET", strSendUrl, true); // The open method initializes XMLHttpRequest.

ObjXmlHttp. onreadystatechange = function () {// callback event function

If (objXmlHttp. readyState = 4) {// if the request completes Loading

If (objXmlHttp. status = 200) {// if the response is successful

// Display the obtained data

                        document.getElementById("divTip").innerHTML = objXmlHttp.responseText;

                    }

                }

            }

ObjXmlHttp. send (null); // send the Set Request

        }

6-1b.html:

<Div class = "clsShow"> name: Tao guorong <br/> Gender: male <br/> Email: tao_guo1_rong@163.com </div>

 

2) load () method to implement Ajax Functions

$(function() {

$ ("# Button1"). click (function () {// click an event

$ ("# DivTip"). load ("6-1b.html"); // load () method to load data

            })

        })

 

3) The getJSON function obtains data.

$(function() {

$ ("# Button1"). click (function () {// click the event

// Open the file and process the obtained data through the callback function

                $.getJSON("UserInfo.json", function(data) {

$ ("# DivTip"). empty (); // clear the content in the tag first

Var strHTML = ""; // initialize and save the Content Variable

$. Each (data, function (InfoIndex, Info) {// traverse the obtained data

StrHTML + = "name:" + Info ["name"] + "<br> ";

StrHTML + = "Gender:" + Info ["sex"] + "<br> ";

StrHTML + = "email:" + Info ["email"] + "
                    })
$ ("# DivTip" pai.html (strHTML); // display processed data
                })
            })
        })


4) The getScript function obtains data.
$(function() {
$ ("# Button1"). click (function () {// click the event
// Open the file with the returned data obtained
                $.getScript("UserInfo.js");
            })
        })

UserInfo. js:
var data = [
  {
"Name": "Tao guorong ",
"Sex": "male ",
      "email": "tao_guo_rong@163.com"
  },
  {
"Name": "Li Jianzhou ",
"Sex": "female ",
      "email": "xiaoli@163.com"
  }
];
 
Var strHTML = ""; // initialize and save the Content Variable
$. Each (data, function () {// traverses the obtained data
StrHTML + = "name:" + this ["name"] + "<br> ";
StrHTML + = "Gender:" + this ["sex"] + "<br> ";
StrHTML + = "email:" + this ["email"] + "
})
$ ("# DivTip" pai.html (strHTML); // display processed data

 
5). get achieves asynchronous acquisition of xml document data
$(function() {
$ ("# Button1"). click (function () {// click the event
// Open the file and process the obtained data through the callback function
                $.get("UserInfo.xml", function(data) {
$ ("# DivTip"). empty (); // clear the content in the tag first
Var strHTML = ""; // initialize and save the Content Variable
$ (Data). find ("User"). each (function () {// traverse the obtained data
                        var $strUser = $(this);
StrHTML + = "name:" + $ strUser. find ("name"). text () + "<br> ";
StrHTML + = "Gender:" + $ strUser. find ("sex"). text () + "<br> ";
StrHTML + = "email:" + $ strUser. find ("email"). text () + "
                    })
$ ("# DivTip" pai.html (strHTML); // display processed data
                })
            })
        })

UserInfo. xml:
<?xml version="1.0" encoding="utf-8" ?>
<Info>
  <User id="1">
<Name> Tao guorong </name>
<Sex> male </sex>
    <email>tao_guo_rong@163.com</email>
  </User>
 
  <User id="2">
<Name> Li Jianzhou </name>
<Sex> female </sex>
    <email>xiaoli@163.com</email>
  </User>
</Info>