首页 > web前端 > js教程 > Ajax的优缺点是什么?ajax如何正确的使用

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

寻∝梦
发布: 2018-09-10 16:06:38
原创
2470 人浏览过

本篇文章主要的讲述关于封装ajax的介绍,还有关于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使用手册栏目中学习),有问题的可以在下方留言提问。

以上是Ajax的优缺点是什么?ajax如何正确的使用的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板