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

最新推荐文章于 2024-06-06 20:19:17 发布

原创最新推荐文章于 2024-06-06 20:19:17 发布 · 695 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #xml #前端 #异步

前端学习记录专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了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没有缓存问题，也无需编码