同步与异步请求、混编、AJAX、原生AJAX封装

最新推荐文章于 2022-08-06 17:18:19 发布

小管打天下

最新推荐文章于 2022-08-06 17:18:19 发布

阅读量208

点赞数 3

分类专栏： # 网络文章标签： ajax javascript

本文链接：https://blog.csdn.net/qq_42647547/article/details/120087122

版权

网络专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、同步与异步请求

（1）前言

浏览器与服务器之间的通信基础是HTTP协议
用户通过网址或表单向服务器提交请求，服务器向浏览器发送相应的响应

如何通过点击能获取数据并展示在页面上？（不用AJAX）
1.混编模式
2.调用接口

如果不是异步请求会导致页面刷新

二、混编

（1）什么是混编？

服务端代码和客户端代码写在一起（php，jsp，asp，python）
php html

混编模式文件要使用后端语言所支持的格式

（2）脚本编程方式

php虽然是一门后端语言，但也是一门脚本语言，因为它是可以嵌入到html中进行编写的，这种编写的方式叫做脚本的编写方式

脚本：驱动HTML运用数据显示出来

（3）缺点

1.不好维护
2.前后端分类难

三、AJAX

（1）AJAX

AJAX：Asyncchronous JavaScript and XML 异步的JavaScript和XML

（2）历史

1999：IE5.0                   允许JS脚本向服务器单独发起HTTP请求的新功能
2004：Gmail                  推出异步邮件更新服务
2005：Google Map        异步更新地图服务
2005：AJAX                   被大厂公认命名
2006：W3C                    发布AJAX国际标准

（3）总结

AJAX是JavaScript脚本发起HTTP通信

JavaScript异步通信：请求服务器返回JSON/XML文档，前端从JSON/XML文档中提取数据，在不刷新整个网页的基础上，渲染到网页相应的位置

（4）获取XML数据的方式

<script type="text/javascript">
    $.ajax({
        url:"xxxx", 			 			 //数据url地址
        type:"GET", 			 			 //请求方式
        dataType:"XML", 				 //数据类型
        success:function(data){  //请求成功的回调函数
            var oList = document.getElementsByTagName('ul')[0];
            var res = data.getElementsByTagName('course'),
                id,
               cname,
               list = "";
           for(var i = 0; i < res.length; i++){
               id = res[i].getElementsByTagName('id')[0].innerHTML;
               cname = res[i].getElementsByTagName('cname')[0].innerHTML;
               list += "<li>" + cname + "</li>"
           }  
           oList.innerHTML = list;   
        }
    })
</script>

四、原生AJAX

（1）原生AJAX

原生XMLHttpRequest对象与ActiveX对象

作用： JS脚本发起HTTP请求必须通过XMLHttpRequest对象
也是通过AJAX进行浏览器与服务器通信的接口
不限于XML，可以发送任何格式的数据

XMLHttpRequest本身是一个js引擎内置的构造函数
所有XMLHttpRequest对象都需要被实例化 var xhr = new XMLHttpRequest();

兼容性： IE5/IE6使用ActiveX对象
var xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

（2）open/send方法

open方法（发送设置）
参数列表
1.method：请求方式
2.url：请求发送的地址
3.async：true异步 false同步

send（发送请求）
参数
发送POST请求体数据用，GET不填写

（3）请求/响应状态

onreadystatechange事件： 挂载到XMLHttpRequest对象上的事件
readyState状态： 通过XMLHttpRequest对象发送HTTP请求的各阶段状态码(0-4)
status状态： 服务器响应的状态码(200 OK、404 未找到页面)

当readyState变化时，将触发onreadystatechange事件执行其回调函数

0：请求未初始化（还未建立请求）
1：服务器连接已建立（TCP连接已建立）
2：请求已接收（服务端已经接收到请求）
3：请求处理中（服务端正在处理请求）
4：请求已完成，且响应已就绪（响应已传达）

注意： readyState仅仅是针对请求的状态码，获取资源是否成功取决于status的状态（200 OK）

（4）接收数据

responseText:获取字符串数据
responseXML：获取XML数据

var xhr;
//兼容性 
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
 
//配置请求 readyState=0
xhr.open('GET','http://localhost/network/class7/server/get_courses.php?status=1',true);
xhr.send();
//发送请求 readyState=1
xhr.onreadystatechange = function(){
  	//获取状态 readyState=2,3,4
    if(xhr.readyState ===4 && xhr.status === 200){
        console.log(Json.parse(xhr.responseText))
    }
}

（5）post与get的不同

POST请求方式下，请求体数据要写在send参数里面（参数格式：‘a=1&b=2&c=3’）
需要设置Content-type: appliction/x-www-form-urlencoded的字段
（设置请求头在.open()之后，.send之前）

xhr.open('POST','http://localhost/network/class7/server/get_courses.php',true);
xhr.setRequestHeader('Content-type', 'appliction/x-www-form-urlencoded');
xhr.send('status=1&flag=1');

POST请求方式必须设置这个头信息，目的是将请求体中的数据转换为键值对，这样后端接收到参数后才知道这是一个POST方式传来的数据

五、原生AJAX封装

（1）JQ三种请求方式

$.ajax({
    url:'xxx',
    type:'POST',
    dataType:'JSON',
    data:{
        status:1
    },
    sucess:function(){
        
    }
})
 
$.post('xxx',{status:1},function(){})
$.get('xxx?status=1',function(){})

（2）封装方式

方法一：老写法

var $ = {
    ajax:function(opt){

    },
     post:function(opt){

    },
     get:function(opt){

    },
}
$.xxx

方法二：模块写法

var $ = (function(){
    return {
        ajax:function(){
        
        },
      	post:function(){
        
        },
      	get:function(){
        
        }
    }
})();
$.xxx

（3）开始封装

var $ = (function(){
    //兼容性
    var o = window.XMLHttpRequest ? new XMLHttpRequest 
                                  : new ActiveXObject('Micorsoft.XMLHTTP');
    //错误处理
    if(!o){
        throw new Error('您的浏览器不支持发起异步')
    }
    //内部实现
    function _doAjax(opt){
        var opt = opt || {},
            type = (opt.type || 'GET').toUpperCase(),
            async = opt.async || true,
            url = opt.url,
            data = opt.data || null,
            error = opt.error || function(){},
            success= opt.success|| function(){},
            complete= opt.complete|| function(){};
        if(!url) {
         throw new Error('请填写URL')
        }
        o.open(type,url,async)
        //做get/post判断
        type === 'POST' && o.setRequestHeader('Content-type',
        'appliction/x-wwww-form-urlencoded');
        o.send(type === 'GET'? null : formatDatas(data));
        o.onreadystatechange = function(){
            if(o.readStatus === 4 && o.status === 200){
                sucess(JSON.parse(o.responseText));
            }
            if( o.status === 404){
                error();
            }
            complete();
        }
    }
    //处理参数的纯函数
    function formatDatas(obj){
        var str = '';
        for(var key in obj){
            str += key + '=' +obj[key] + '&';
        }
        //处理结尾&并返回
        return str.replace(/&$/, '');
    }                              
    return {
        ajax:function(opt){
            _doAjax(opt);
        },
        get:function(url,callback){
            _doAjax({
                type : 'GET',
                url: url,
                sucess: callback
            });
        },
        post:function(url,data,callback){
             _doAjax({
                type : 'POST',
                data: data,
                url: url,
                sucess: callback
            });
        }
    }
})()
调用：
$.ajax({
	type: 'POST',
  url: 'http://localhost/network/class7/server/get_courses.php',
  data: {
  	status: 1,
    flag: 2
  },
  success: function(data){
  	console.log(data)
  }
});

$.post('http://localhost/network/class7/server/get_courses.php', 
       {status: 1, flag: 2}, 
       function(data){console.log(data);}
      );

$.get('http://localhost/network/class7/server/get_courses.php?status=1&flag=2',  
       function(data){console.log(data);}
      );

如果引入了JQ，就肯定不能用$了，把$改成xhr就行了

小管打天下

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
同步与异步请求、混编、AJAX、原生AJAX封装

一、同步与异步请求（1）前言浏览器与服务器之间的通信基础是HTTP协议用户通过网址或表单向服务器提交请求，服务器向浏览器发送相应的响应如何通过点击能获取数据并展示在页面上？（不用AJAX）1.混编模式2.调用接口如果不是异步请求会导致页面刷新二、混编（1）什么是混编？服务端代码和客户端代码写在一起（php，jsp，asp，python）  php          &
复制链接

扫一扫