Ajax的优缺点是什么？ajax如何正确的使用

Ajax

说道ajax到底什么是ajax？ ajax是一种创建交互网页应用的一门技术。

ajax的优缺点：

优点：1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力

缺点：1.破坏了浏览器前进和后退机制（因为ajax自动更新机制）

2.一个Ajax请求多了，也会出现页面加载慢的情况。

3.搜索引擎的支持程度比较低。

4.ajax的安全性问题不太好（可以用数据加密解决）。

首先说明：如果要使用ajax必须要有后端环境的支持（服务器端）。

HTTP请求

HTTP请求有两种方式

GET：用于获取数据，GET是在URL上传递数据（网址后面的东西），存储量较少，安全系数比较低。

POST：用于上传数据，POST安全性一般比（GET好一些），容量几乎是无限（多用于表单）。

Ajax的使用

使用ajax一共有4个步骤：1.创建ajax、2.连接服务器、3.发送请求、4.接受返回值。

创建Ajax

创建ajax必须考虑兼容性处理，IE6以上：new XMLHttpRequest()、IE6：new ActiveXObject(“Microsoft.XMLHTTP”)

兼容处理

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

连接服务器

上面创建的ajax对象xhr，使用xhr.open（”请求方式（GET/POST）”，url路径，“异步/同步”）。

第三个参数：true===》异步、false===》同步。（想看更多就到PHP中文网AJAX开发手册栏目中学习）

当请求方式为POST的时候，代码写法如上；

当请求方式为GET的时候，使用xhr.open（”请求方式（GET/POST）”，url路径 + “？”请求数据 + ，“异步/同步”）。

发送请求

使用xhr.send（）发送请求

当请求方式为GET的时候，发送请求为xhr.send(null).

当请求方式为POST的时候，发送请求为xhr.send(请求数据)。

此外使用POST的时候必须在xhr.send（请求数据）上面添加

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

接收返回值

使用ajax会想用一个事件readystatechange事件：当请求被发送到服务器时，我们需要执行一些基于响应的操作。

当readystatechange改变的时候，就会触发这个事件执行。

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使用手册栏目中学习），有问题的可以在下方留言提问。