What are the advantages and disadvantages of Ajax? How to use ajax correctly

This article mainly talks about the introduction of encapsulationajax, as well as the asynchronous request of ajax. Now let’s take a look at this article

Ajax

Talking about ajax What exactly is ajax? Ajax is a technology for creating interactive web applications.

The application scenarios of ajax include: (map) real-time update, form validation, etc.....

Advantages and disadvantages of ajax:

Advantages: 1. Realize partial update (without refresh state), 2. Reduce the pressure on the server side

Disadvantages: 1. Destroy the browser forward and backward mechanism (because of the ajax automatic update mechanism)

              2. If there are too many Ajax requests, the page will load slowly.

                                                                                                                      Search engine support is relatively low.

4.AJAX's security problems are not good (you can use data encryption).​

​ First of all, if you want to use ajax, you must have the support of the back-end environment (server side).

HTTP request

There are two methods of HTTP request

GET: used to obtain data, GET is to pass data on the URL (things after the URL), The storage capacity is small and the safety factor is relatively low.

POST: Used to upload data. POST security is generally better than (GET), and the capacity is almost unlimited (mostly used for forms).

Use of Ajax

There are 4 steps in using ajax: 1. Create ajax, 2. Connect to the server, 3. Send a request, 4. Accept the return value.

Creating Ajax

When creating ajax, compatibility must be considered. IE6 and above: new XMLHttpRequest(), IE6: new ActiveXObject("Microsoft.XMLHTTP")

Compatible processing

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
} else{
    xhr = new ActiveXObject("Mricosoft.XMLHTTP");
}

Connecting to the server

## "Request method (GET/POST)", url path, "asynchronous/synchronous").

The third parameter: true===》asynchronous, false===》synchronous. (If you want to learn more, go to the PHP Chinese website

AJAX Development Manual column to learn)

When the request method is POST, the code is written as above;

When the request method is GET, use xhr.open ("Request method (GET/POST)", url path "?" to request data, "Asynchronous/Synchronous").

                                                                                                        ‐ ‐ ‐                                           through ‐ to Get GET's way to be t-----                               use ).

When the request method is POST, the request to send is xhr.send (request data).

                                                                                                                                                                                  must be added to xhr.send (request data)

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

## When using ajax, you will want to use an event readystatechange event: when the request is sent to the server, we need to perform some response-based operations.

When readystatechange changes, this event will be triggered.

        readyState：请求的状态，返回的是状态码（0 - 4）：0（未初始化）open还没有调用、1（载入）已经调用了send（）正在发送请求、2（载入完成）send方法已经完成  已经收到了全部的响应内容、3（解析）正在解析响应内容、4（完成）响应内容解析完成  可以在客户端用了。

        responseText：返回请求的内容。

        status：返回请求的结果码：返回200（成功）、返回404（未找到）、返回5**（5开头）（服务器错误）

        封装Ajax

        在封装ajax的时候会使用到参数传递，因此必须写个方法作为对象属性转换为ajax请求数据的方法

        下面是ajax封装，并举例：

function ajax(options){
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
}

ajax({
    url : "a.php",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步：false，异步：true 
    data : {        //传入信息
        name : "张三",
        age : 18
    },
    success : function(data){   //返回接受信息
        console.log(data);
    }
})

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

The above is the detailed content of What are the advantages and disadvantages of Ajax? How to use ajax correctly. For more information, please follow other related articles on the PHP Chinese website!