ajax编程之基础详细篇

什么是ajax?

它是异步的JavaScript和XML

	优点:
	页面无刷新,用户的体验感好
    异步通信,刚加快快的通信能力
    减少冗余,减少了对服务器的压力
    基于标准的并且被支持的技术,不需要下载插件和小程序

	缺点:
	jax干掉了按钮,也就是对浏览器后退机制进行了破坏
    存在一定的安全隐患
    对浏览器的搜索引擎支持比较弱    
    破坏了程序的异常机制
    无法使用URL直接访问

那么ajxa到底有什么用呢?

  1. 对数据的验证

  2. 按照需求取得数据

  3. 自动更新页面

ajax包含哪些部分

  1. 使用css和XML表示

  2. 使用DOM模型来交互和动态显示

  3. 使用XMLHttpRequest来与服务器进行异步通信(虽然w3c目前没有采纳XMLHttpRequest)

  4. 使用JavaScript进行绑定和调用

那么XMLHttpRequest包含哪些属性和方法呢

readyState:  请求状态
     responseText:表示响应体的字符串
    responseXML:表示响应体的XML
    status:请求返回的Http状态码
  	statusText:Http响状态的文本
    onreadystatechange :当处理过程发生变化时候执行下面的函数

    XMLHttpRequest方法:
                        Xml.open()  打开向服务器发送的请求
                        Xml.send()  发送Http请求给服务器

那么如何创建一个ajax呢?步骤如下:

创建XMLHttpRequest
        var xhr = new XMLHttpRequest()
        <!-- 老版的浏览器方法:var xhr = new ActiveXObject("microsoft.XMlHTTP) -->
        <!-- 如果想兼容各个浏览器,可以使用ajax的工具函数 -->
        
        5.2准备请求,初始化XMLHttpRequest,接受三个参数
        xhr.open(method,url,async);

        第一个参数method:get或者post
        get:open('get',demo.pnh?name=tsrot&ag=24,true)
        post:open("post""demo.php",true)

        第二个参数URL作为请求发送目标的地址URL

        第三个参数true或者false,代表为异步操作或者不是异步操作

发送请求:

 xhr.send()
        get方式:
                xhr.open("GET",demo.php?name=tsrot&age=24,true);
                xhr.send(null);
        post方式:
                xhr.open("post",demo.php,true);
                xhr.SetRequestHeader("content-type","application/x-wwww-form-urlencoded,charset=utf-8");
                xhr.sen

处理响应:

xhr.onreadyStatechange =function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText);
            }
        }

        onreadyStatechange:当处理过程发生变化时执行下面的函数
        readyState:ajax的处理过程,五个状态分别是0-4
        0:请求未初始化
        1:已经建立了请求,但是没有发送出去
        2:请求已经发送了,正在处理中
        3:请求正在处理中;通常响应中已有的部分数据可以用了,但是服务器还没有完全响应的完成
        4:响应已经完成,可以获取并使用服务器的响应了

        status属性:
                    200"ok"
                    404:  "未找到网页"
        responseText:获得字符串形式的数据
        responseXML:获得XML形式的数据

        对象转化为JSON格式使用:JSON.stringify
        json转换为对象格式用JSON.parse
        返回值一般为JSON字符串,可以用JSON.parse(xml.responseText)转化为JSON对象
        这里可以看一个案例,从服务器返回的数据是否是JSON格式的数据,如何利用:

        1、首先从XMLHttpRequest对象上取回JSON串,把它转化成真正的JavaScript对象
            使用json.parse(xml.responseText)转化为json对象
        2、遍历得到数组,向DOM中添加新元素
            function example(responseText){
                var saleDiv = document.getElementById("sales");
                var sales = json.parse(xml.responseText);
                for(var i = 0;i<sales.length;i++){
                    var sales=sales[i];
                    var div =document.createElement("div");
                    div.innerHTML = sale.name+sale.sales
                    salesDiv.appendChild(div);
                }
            }

封装例子:

将ajax请求封装成ajax()方法,它接受一个配置对象params
        function ajax(params){
            params = params ||{};
            params.data=params.data||{};
            <!-- 判断是ajax请求还是JSONP请求 -->
            var JSON = params.jsonp ?jsonp(params):json(params)
            <!-- ajax请求 -->
            function json(params){
                <!-- 请求方式默认是get -->
                params.type=(params.type||"get").toUpperCase();
                <!-- 避免有特殊的字符,必须格式化传输数据 -->
                prams.data = formatParams(prams.data);
                var xhr = null;
                <!-- 实例化XMLHttpRequest对象 -->
                    if(windows.XMLHttpRequest){
                        xhr = new XMlHttpRequest
                    }else{
                        <!-- IE6以及以下版本 -->
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
            }

        }

使用实例:

 ajax({
            url:'作为目标地址',
            type:"传输方式"//get或者post
            data:{'b',"是否同步"}//true 或者false 
            success:function(res){             //请求成功后调用的函数
                    console.log(json.parse(res));
            },
            error:function(error){}         //请求失败后调用的函数
        })

        这个过程一定一定要记住在脑子里:
            function ajax(url,success,fail){
                <!-- 1.创建连接 -->
                var xhr = null;
                <!-- 实例化对象 -->
                xhr = new XMLHttpRequest()<!-- 连接服务器 -->
                xhr.open("get",url,true);
                <!-- 发送请求 -->
                xhr.send(null);
                <!-- 接受请求 -->
                xhr.onreadystatechange = function (){
                        if(xhr.readyState==4){
                            if(xhr.status==200){
                                success(xhr.responseText);
                            }
                            else{           //也就是失败调用的
                                fail && fail(xhr.status);
                            }
                        }
                }
            }

以上代码有bug或者不足的地方,清告知及时改正哦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值