ajax小结

在平时的开发项目中,难免接触前端的知识,需要写接口,有时候用到js中的ajax跨越请求,总结了ajax的写法。

开始之前,需要准备两个文件,ajax.php ;ajax.html

1.ajax的基本步骤(ajax.php)

//1.创建对象
    var ajax = new XMLHttpRequest();
    // alert(typeof ajax);

//2.建立连接
ajax.open('get', 'ajax.php?id=5', true);

//3.发送请求
ajax.send();

//4.准备事件处理结果
ajax.onreadystatechange = function()
{
    if (ajax.readyState == 4 && ajax.status == 200) {
        //请求: request
        //响应: response
        var res = ajax.responseText;

        // alert(res);
        document.write(res);
    }
}

ajax,有同步异步的区别?异步:把小弟派出去了,什么时候回来,什么时候处理它,主程序继续执行,不会等待。同步:(比较少用)会在send这一步等待,主程序不会继续执行。method:请求的类型;GET 或 POST 。

2.ajax封装为函数(ajax.php)

<script>
 function get(url, func)
 {
     var ajax = new XMLHttpRequest();
     ajax.open('get', url, true);
     ajax.send();
     ajax.onreadystatechange = function()
     {
         if (ajax.readyState == 4 && ajax.status == 200) {
             var res = ajax.responseText;

             func(res);
         }
     }
 }

 //回调 + 匿名
 get('1.php', function(res){
     alert(res);
 })

 get('ajax.php', function(res){
     console.log(res);
 })

/*
 get('1.php', chuli);
 function chuli(res)
 {
     alert(res);
 }

 get('ajax.php', chuli2);
 function chuli2(res)
 {
     console.log(res);
 }
 */
</script>

这样封装好,就方便我们使用了,tp框架,ecshop,ecstore,都有自己的封装的ajax。

3.jq中的ajax请求(ajax.php)

$.ajax({
     url: 'ajax.php?id=5',
     dataType: 'json',    //指定返回数据的类型:xml, html, script, json, text, _default (不要骗他)
     type: 'get',    //设置请求的类型:get(默认) post
     // data: 'name=123&age=18',    //传输的数据(有两种格式)
     data: {age:8},    //传输的数据
     async: true,    //同步异步:true 默认异步     false 同步 
     success: function(res) {
         // alert(typeof res);
         // alert(res.id);
         alert(123);
     },
     error: function(a){
         alert('出错鸟~~~');
     }
 });

4.ajax跨域问题(ajax.php)

协议、域名、端口这三个有任何一个不同,就跨域了。ajax本身是不可以跨域的,通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。其实设置了dataType: 'jsonp'后,$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议。JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。

实现ajax的跨域请求,有几种方法,这儿写一种通过‘jsonp’,实现跨域的方法

<script type="text/javascript">     
   var url = 'http://localhost/other.php?act=get_article';
$.ajax({
    type : "get",
    url :url, 
    jsonp: "callbackparam",
    jsonpCallback:"jsonpCallback1",
    success : function(data){
        var obj = eval(data);
        //处理接收到的数据
    },
    //end
    error:function(e){
        alert("error");
    }
});                
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,265评论 0 7
  • Ajax的基本概念及使用 同步&异步 同步:必须等待前面的任务完成,才能继续后面的任务; 异步:不受当前主要任务的...
    magic_pill阅读 1,974评论 0 5
  • 原文出处 http://blog.poetries.top/2016/11/26/Ajax-summary 关注公...
    前端进阶之旅阅读 6,705评论 3 110
  • Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest ...
    对角另一面阅读 615评论 0 1
  • 五十三:请解释 JavaScript 中 this 是如何工作的。1.方法调用模式当一个函数被保存为一个对象的属性...
    Arno_z阅读 596评论 0 2