ajax

0 XMLHttpRequest创建完对象
1 初始化完成 open
2 发送请求 send
3 正在接收数据
4 接收完成

原生js

  //创建XMLHttpRequest对象
  function createXHR() {
var xhr = null;
if (XMLHttpRequest) {
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
  }

//type,url,data,async,fnSuccess,fnError

  // var data = {type:"get",url:"",data:null,async:true,success:  ,error:  };
  function ajax(data) {
//1
var xhr = createXHR();
var type,async;
type = data.type == "post" ? "post" : "get";
async = data.async?true:false;
//2
xhr.open(type,data.url,async);
//如果是post,设置请求头
if (type == "post") {
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
//3
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            if (typeof  data.success == "function") {
                //调用回调函数,传入服务器返回的结果
                data.success(xhr.responseText);
            }
        }else{
            if(typeof data.error == "function") {
                data.error();
            }

        }
    }
}
//4
xhr.send(data.data);
  }
应用
  <script src="js/ajax.js"></script>
<script>
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            ajax({
                type:"get",
                url:"php/01-gettime.php",
                async:true,
                data:null,
                success: function (data) {
                    alert(data);
                },
                error: function () {
                    alert("错误");
                }
            })
        }
    }
</script>

jQuery中封装的ajax

  jQuery的ajax请求
            $.ajax({
                url: './tologin.php',
                type: 'POST',
                dataType: 'html',
                data: {username: 'qqq',password:"123"},
                success:function(data){
                    alert(data);
                },error:function() {
                    alert(0);
                }
            })

jsonp

产生的缘由:
1,浏览器的同源策略
2,<script>的src不属于同源策略
3,通过<script>的src指向的文件返回服务端数据

jQuery方法

  <script>
    $(function(){
        $.ajax({
            type:"get",
            cache:false,//不缓存
            url:"http://v.juhe.cn/weather/index?format=2&cityname=%E9%82%AF%E9%83%B8&key=e982f3629ae77eb7345b7e42f29b62ae&dtype=jsonp",
            dataType:"jsonp",
            success: function (data) {
                alert(data.reason);
            },
            error: function () {
                alert("亲,错误");
            }
        });
    })

自己写的小demo

  <body>
  <button id="btn">查询正在上映的电影</button>
  <span id="msg"></span>
  <ul id="content"></ul>
  </body>
  <script>
$(function () {
    document.getElementById("btn").onclick = function () {
    var msg = document.getElementById("msg");
    msg.innerHTML = "正在拼命的加载...";
    var cb=Math.random();
    console.log(111);
    $.ajax({
            type:"get",
            // https://api.douban.com/v2/movie/in_theaters?start=0&count=10&q=undefined&callback=my_json_cb_08407925261695444
            url:"https://api.douban.com/v2/movie/in_theaters?start=0&count=10&q=undefined",
            dataType:"jsonp",
            jsonp:"callback",     //将来会替换掉地址中的  callback
            jsonpCallback:"cb",   //生成一个全局的方法  handle
            success: function (data) {
                console.log(data.subjects);
                var film=data.subjects;
                msg.innerHTML = "";
                // console.log(film[0].title);
                for(var i=0;i<film.length;i++){
                    console.log(222);
                     li=document.createElement("li");
                     li.innerHTML=film[i].title;
                     document.getElementById("content").append(li);
                }

            },
            error: function () {
                alert("error");
            }
        });

};
  });
        
            





  </script>

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 2,278评论 0 7
  • Ajax 表单提交 在HTML中提供了表单提交的功能,我们可以通过表单把数据从前台提交到后台 在HTML的DOM中...
    羊烊羴阅读 496评论 0 4
  • Ajax的基本概念及使用 同步&异步 同步:必须等待前面的任务完成,才能继续后面的任务; 异步:不受当前主要任务的...
    magic_pill阅读 1,158评论 0 5
  • 相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时...
    TGCode阅读 2,855评论 3 5
  • 文 / 秦未 我原来也接触过Ajax的开发,但始终没有系统的学习,今天正好有时间就在慕课网学习一下,也在这里分享自...
    煮茶忘放糖阅读 479评论 0 2