js implements ajax sending

js sends ajax to send, step by step

The core of ajax is XMLHttpRequest,

Step 1: Create an object xmlrequest, which supports new in mainstream browsers,

var xmlhttp = new XMLHttpRequest() IE browser does not support this method, you need to write another function to create

Step 2: Connect to the server

After getting the XMLHTTPRequest object, you can call the open() method of the object to connect to the server with the following parameters

open（method，url，async）:

　　method: request method GET or POST,

　　url: the address of the server,

　　async : Indicates an asynchronous request, it can be omitted, the default is True,

xmlhttp.open（"GET“，"/ajax_get/",true）;

Step 3: Send the request

xmlhtto.send(null), there is a compatibility problem, plus null, null is a data type in js, which means empty,

The above 3 steps are equivalent to jquery's

$.ajax({

　　url:"/ajax_get/",

　　type:"GET",

　　success:function(){

　　}

　　)}

Step 4: Receive server response,

The request is sent, the server starts to execute,

The XMLHttpRequest object has an onreadystatechange event,

0: Initialize the external network state, only create the XMLHttpRequest object,

1: The request starts, the open( ) method is called,

2: Request sending completion status, send() method call,

3: Start reading the server response,

4: Read the end of the server response,

The onreadystatechange event will be raised when the state is 1,2,3,4,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<form action="/index/" method="post">

    <p><input type="text">{{ error }}</p>
    <p><input type="text">{{ error }}</p>
    <p><input type="submit"></p>

</form>

<p>用户名：<input type="text" class="user"></p>
<button onclick="send()">ajax</button>

</body>

<script>
{# Bind the send event to the button button#}
    function send() {

        var ele = document.getElementsByClassName("user")[0];
        var con = ele.valueOf;

        xmlHttp=new XMLHttpRequest();
        xmlHttp.open("GET","/getajax/",true);
        xmlHttp.send(null);

        {#Monitoring server#}
        xmlHttp.onreadystatechange=function () {
            if (xmlHttp.readyState ==4 && xmlHttp.status ==200){
                alert(xmlHttp.responseText);
                alert(typeof xmlHttp.responseText)

            }
        }

 }The state of the XMLHttpRequest
 object is obtained 
through the readyState property of the XMLHttpRequest object. To get the content of the server response, you can get the server response content through the responseText of the XMLHttpRequest object .

</script>


</html>

ajax post request

<1> The request header needs to be set: xmlHttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded") ; Note: The form form will default this key-value pair not to be set, and the web server will ignore the request body content.

<2> The request body can be specified when sending: xmlHttp.send(“username=yuan &password=123”)

    Create XMLHttpRequest object;
    Call the open() method to open a connection to the server;
    Call the send() method to send the request;
    Specify the onreadystatechange event function for the XMLHttpRequest object, this function will be in

    It is called when the four states of XMLHttpRequest are 1, 2, 3, and 4;

    There are 5 states of the XMLHttpRequest object, usually we only care about 4 states.

    The status attribute of the XMLHttpRequest object represents the server status code, which can only be obtained when the readyState is 4.

    The responseText property of the XMLHttpRequest object represents the server response content, which is only available in
    It can only be obtained when readyState is 4!

js implements ajax sending

Guess you like