XMLHttpRequest implements Ajax & data format JSON

GET request

index

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type = "text / javascript" > 
    window.onload =  function () {
         // 1. Get a node and add onclick response function to it 
        document.getElementsByTagName ( " a " ) [ 0 ] .onclick =  function () { 

            // 3. Create an XMLHttpRequest object 
            var request =  new XMLHttpRequest (); 

            // 4. Prepare to send the requested data: url 
            var url =  this .href +  " ? Time = "  +  new Date (); // different timestamps, To achieve the purpose of disabling cache 
            varmethod =  " GET " ; 

            // 5. Call open method of XMLHttpRequest object 
            request.open (method, url); 

            // 6. Call send method of XMLHttpRequest object 
            request.send ( null ); 

            // 7. Add for XMLHttpRequest object onreadystatechange response function 
            request.onreadystatechange =  function () {
                 // alert (request.readyState); 
                // 8. Determine whether the response is complete: when the readyState property of the XMLHttpRequest object is 4, 
                if (request.readyState ==  4 ) {
                     / / 9. In judging whether the response is available: XMLHttpRequest object status attribute value is 200 
                    if(request.status ==  200  || request.status ==  304 ) {
                         // 10. Print the response result: responseText 
                        alert (request.responseText); 

                    } 
                } 
            } 
            // 2. Cancel the default behavior of a node 
            return  false ; 
        } 
    } 
</ Script > 
</ head > 
< body > 
    < A the href = "the helloAjax.txt" > HelloAjax </ A > 
</ body >
</html>

post request

index2

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type = "text / javascript" > 
    window.onload =  function () {
         // 1. Get a node and add onclick response function to it 
        document.getElementsByTagName ( " a " ) [ 0 ] .onclick =  function () { 

            // 3. Create an XMLHttpRequest object 
            var request =  new XMLHttpRequest (); 

            // 4. Prepare to send the requested data: url 
            var url =  this .href +  " ? Time = "  +  new Date (); // different timestamps, To achieve the purpose of disabling cache 
            varmethod =  " POST " ; 

            // 5. Call the open method of the XMLHttpRequest object 
            request.open (method, url); 

            request.setRequestHeader ( " ContentType " ,
                     " application / x-www-form-urlencode " ); // conforming Encoding format 
            // 6. Call the send method of the XMLHttpRequest object 
            request.send ( " name = 'colin' " ); 

            // 7. Add the onreadystatechange response function to the XMLHttpRequest object 
            request.onreadystatechange =  function () {
                 //alert (request.readyState); 
                // 8. Determine whether the response is complete: when the readyState property of the XMLHttpRequest object is 4, 
                if (request.readyState ==  4 ) {
                     // 9. In determining whether the response is available: status property of the XMLHttpRequest object The value is 200 
                    if (request.status ==  200  || request.status ==  304 ) {
                         // 10. Print the response result: responseText 
                        alert (request.responseText); 

                    } 

                } 
            } 

            // 2. Cancel the default behavior of node a 
            return  false ; 
        } 
    } 
</script>
</head>
<body>
    <a href="helloAjax.txt">HelloAjax</a>
</body>
</html>

Data format JSON

<! DOCTYPE html > 
< html > 
< head > 
< meta charset = "UTF-8" > 
< title > Insert title here </ title > 
< script type = "text / javascript" > 
    / * 
     Data is placed in a pair of braces Here, is a collection of key-value pairs, assigned with a colon. 
     Multiple key-value pairs are separated by commas. The value itself can also be a json object or a method (storage function) 
     . The data in the object description can be a string, number, or boolean. value. 
     * / 
    var jsonObject = {
         " name " : " hemiao " ,
        age" : 22,
        "address" : {
            "city" : "Anhui",
            "school" : "anshida"
        },
        "teaching" : function() {
            alert("java+ssm ...");
        }
    };
    //     alert(jsonObject.name);
    //     alert(jsonObject.address.city)
    //     jsonObject.teaching()

    var jsonStr =  " {'name': ' 文静'} " ; 

    //      Turn a string into a json object
     //      alert (jsonStr.name); 

 //      Using the eval () method, you can turn a string into a local Js code to execute var testStr = " alert ('hello eval') " ; 
    eval (testStr); // Convert json string to JSON object var json = eval ( " ( " + jsonStr + " ) " ); / / need only be a bracketed     Alert (json.name)
 </ Script > </head   
     

    
      

>
<body>

</body>
</html>

XMLHttpRequest implements Ajax & data format JSON

Guess you like