【前端学习笔记】原生Javascript中的ajax

本文详细介绍了AJAX(异步JavaScript和XML)的概念及其在网页数据交互中的应用。包括GET和POST请求的区别,如何创建和使用AJAX对象,以及数据提交方式的实现细节。此外还提供了AJAX封装函数示例,并探讨了不同请求方式下的处理技巧。

ajax概念———————————————————————————-

ajax:Asynchronous Javascript and XML

异步的js和XML,用javascript异步形式去操作xml

用于数据交互

表单(原理相似)——————————————————————————–

数据的提交

    action : 数据提交的地址 默认是当前页面
    method : 数据提交的方式 默认是get方式
        1.get
            把数据名称和数据值用 = 连接,多个数据用&进行连接,然后把数据放在
            url?后面传给指定页面。如url?username=pobu&password=123
            url长度有限制,get不能传送过多数据
        2.post
            理论上无限制
    enctype : 提交数据的格式 默认为"application/x-www-form-urlencoded"

使用ajax———————————————————————————-

1.创建一个ajax对象 
new xhr = new XMLHttpRequest(); //支持IE7以上和标准浏览器

        new xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE6以下

        //兼容写法

        new xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//判断一下window下的属性是否存在

        //兼容写法2(利用异常处理)

        new xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
2.调用open方法
    参数
        第一个参数 : 打开方式
        第二个参数 : 地址
        第三个参数 : 是否异步
                        异步:非阻塞 前面的代码不会影响后面代码的执行
                        当后面代码不要用到前面的东西的时候,用异步非阻塞模式
                        同步:阻塞 前面的代码会影响后面代码的执行
                        当后面代码要用到前面的东西的时候,用同步阻塞模式

3.发送请求 调用send方法

4.服务器返回内容
    xhr.responseText : ajax请求返回的内容被存放在这个属性下面

    xhr.readyState : ajax工作状态
        -0 (初始化) 还没有调用open()方法
        -1 (载入) 已调用send()方法 正在发送请求
        -2 (载入完成) send()方法完成 已收到全部响应内容
        -3 (解析) 正在解析响应内容
        -4 (完成) 解析响应内容完成,可以在客户端调用了

    xhr.on readystate change : 当readyState改变的时候事件发生

    xhr.status : 服务器状态,http状态码
             1xx:消息
             2xx:成功
             3xx:重定向
             4xx:请求错误
             5xx:服务器错误

5.对返回数据的处理

    浏览器内置对象JSON(IE7以下要引入官方JSON.js文件)

    JSON.stringify(obj) : 可以把一个对象转为对应字符串
    如 [1,2,3]     -> '[1,2,3]'
        {left:100} -> '{"left":100}'

    JSON.parse(str) : 可以把字符串转成对应对象
        '[1,2,3]'        ->      [1,2,3]
        '{"left":100}'   ->      {left:100} (注意,成员名一定要加双引号)

ajax初步封装:
function ajax(method, url, data, successFn){

            url = (method === 'get') && data ? url+'?'+data : url;
            new xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        xhr.open(method,url,true);

        if( method === 'get' ){
            xhr.send();
        }else{
            xhr.setRequestHeader('content-type','application/x-www-form-urlencode');
            xhr.send(data);
        }

        xhr.onreadystatechange = function(){
            if( xhr.readyState == 4){
                if(xhr.status === 200){
                    successFn&&successFn(xhr.responseText);
                }else{
                    alert( '出错了,Err:' + xhr.status + '错误');
                }
            }
        }

    }

ajax应用中get和post的区别处理—————————————————————-

get方式 : 
1.在url?最后面加一个&随机数 防止读缓存 &+new Date().getTime
2.乱码 编码传输用encodeURI(name)

post方式 :
1.设置请求头 xhr.setRequestHeader('content-type','application/x-www-form-urlencode');//声明发送的数据类型
2.数据放在xhr.send(data)中。

post没有缓存问题,也无需编码
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值