原生js发送ajax

  1.         var xhr = null;
  2.         if (window.XMLHttpRequest) {
  3.             xhr = new XMLHttpRequest();
  4.         } else {
  5.             xhr = new ActiveXObject("Microsoft.XMLHttp");
  6.         }
  7.         xhr.open("get", "http://developer.duyiedu.com/edu/testAjaxCrossOrigin", false);
  8.         xhr.onreadystatechange = function () {
  9.             //readyState == 4表示请求完成，已经接收到数据。
  10.             //status == 200  网络请求，结果都会有一个状态码。来表示这个请求是否正常
  11.             //200表示请求成功
  12.             // http状态码
  13.             //2**表示成功
  14.             //3**表示重定向
  15.             //4**表示客户端错误,404页面没找到。
  16.             //5**表示服务端错误
  17.             if (xhr.readyState == 4 && xhr.status == 200) {
  18.                 var data = JSON.parse(xhr.responseText);
  19.                 console.log(data);
  20.             }
  21.         }
  22.         xhr.send();//如果open第三个参数传true，或者不传，为异步模式。如果传false，为同步模式。
  23.         //在计算机的世界里，异步与同步和现实世界中是相反的。
  24.         // 在计算机的世界里，同步表示串行。异步表示同时进行。可以理解为同线程和异线程。

使用原生封装一个简单的Ajax
简单请求的Ajax的请求头部只能有
image.png
其中Content-Type 可以有也可以无 她只有三个值 application/x-www-form-urlencode ; multipart/form-data; text/plain;

  1. /**
  2.  * ajax请求数据
  3.  * @param {object} option 对象
  4.  * 简单请求的ajax
  5.  * 请求方式 : get / post
  6.  * url:请求地址
  7.  * data:请求数据（请求的参数）参数以'?key = value&'的形式连接在一起
  8.  * method: Get
  9.  * isAync：是否异步请求数据
  10.  * success:数据请求成功后的回调函数
  11.  * 
  12.  */
  13. function ajax(option){
  14.     // 首先判断浏览器是否支持XMLHTTPRequest() 或 ie浏览器的 ActiveXObject("Microsoft.XMLHttp") 
  15.     var xhr = null;
  16.     if(window.XMLHttpRequest){
  17.         xhr = new window.XMLHttpRequest;
  18.     }else if ( window.ActiveXObject("Microsoft.XMLHttp")){
  19.         xhr = new window.ActiveXObject("Microsoft.XMLHttp");
  20.     }else{
  21.         alert('浏览器不支持访问数据')
  22.     }
  23.     var method = '';
  24.     var deta = '';
  25.     var url = option.url;
  26.     var isAync = typeof option.isAync === 'undefined'? true : option.isAync;
  27.     var success = typeof option.success === 'function' ? option.success : function(){};
  28.     // 判断请求方式 如果是小写将其改为大写
  29.     if(option.method){
  30.         method = option.method.toUpperCase();
  31.     }else{
  32.         method = 'GET'
  33.     }
  34.     // 判断请求参数，并将对象类型的参数修改为字符串
  35.     if(typeof option.deta === 'object'){
  36.         for(var prop in option.deta){
  37.             deta += prop +'='+ option.deta[prop]+'&';
  38.         }
  39.     }else{
  40.         deta = option.data;
  41.     }
  42.     // 判断是否请求成功
  43.     xhr.onreadystatechange = function(){
  44.         if(xhr.readyState === 4){
  45.             if(xhr.status === 200){
  46.                 success(JSON.parse(xhr.responseText))
  47.             }
  48.         }
  49.     }
  50.     //是否为get
  51.     if(option.option === 'GET'){
  52.         // 请求数据
  53.         xhr.open(method,url+'?'+deta ,isAync );
  54.         xhr.send();
  55.     }else{
  56.         // 此处为post
  57.         xhr.open(method,url,isAync)
  58.         xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencode');//以字符串的形式
  59.         xhr.send()
  60.     }
  61. }

jquery发送Ajax

jsonp的原理在笔记中的跨域中有详细记载

  1.        //jsonp格式哪里特殊？
  2.         //发送的时候，会带上一个参数callback
  3.         //返回的结果不是json
  4.         //callback的名 + ( + json + );
  5.         $.ajax({
  6.             url: "http://developer.duyiedu.com/edu/testJsonp",
  7.             type: "post",
  8.             dataType: "jsonp",
  9.             success: function (data) {
  10.                 console.log(data);
  11.             }
  12.         });
  14.         //jsonp跨域，只能使用get方法，如果我们设置的是post方法，jquery会自动转为get方法。
  15.         //是不是在jsonp里面我只能使用get方法？是不是我设置的post方法都会转为get方法？
  16.         //不是。
  17.         //jquery会先判断是否同源，如果同源，那么设置的是get就是get，设置的post就是post
  18.         //如果不是同源，无论设置的什么，都改为get.

检测是否使用啦jsnp

  1. https://www.baidu.com/sugrec?prod=pc&wd=牛&cb=ab