封装方法:

            function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data); //创建 - 非IE6 - 第一步
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else { //IE6及其以下版本浏览器
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
} //连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
} //接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.error && options.error(xhr.status);
}
}
}
}
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".", ""));
console.log(arr);
return arr.join("&");
}

请求实例:

                ajax({
url: "http://www.xxx.com/app/index", //请求地址
type: "get", //请求方式
data: { page: "page" }, //请求参数
dataType: "json",
success: function (response, xml) {
// 此处放成功后执行的代码
console.log(JSON.parse(response))
},
error: function (status) {
// 此处放失败后执行的代码
}
});

 JSONP

JSONP的核心是动态添加script标签来调用服务器提供的js脚本

    function jsonp(options) {
options = options || {};
if (!options.url || !options.callback) {
throw new Error("参数不合法");
} //创建 script 标签并加入到页面中
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
options.data[options.callback] = callbackName;
var params = formatParams(options.data);
var oS = document.createElement('script');
oHead.appendChild(oS); //创建jsonp回调函数
window[callbackName] = function (json) {
oHead.removeChild(oS);
clearTimeout(oS.timer);
window[callbackName] = null;
options.success && options.success(json);
}; //发送请求
oS.src = options.url + '?' + params; //超时处理
if (options.time) {
oS.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oS);
options.fail && options.fail({ message: "超时" });
}, time);
}
}; //格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}

ajax与jsonp本质上不是一个东西,ajax的核心是通过XMLHttpRequest对象来获取非本页的内容,而jsonp则是通过动态创建script标签来获取服务器端的js脚本。

ajax与jsonp的本质区别不在于是否跨域,ajax通过服务器端代理(浏览器请求同源服务器,再由后者请求外部服务)也一样可以实现跨域,jsonp本身也可以获取同源的数据。

同源策略

javascript只能访问与包含他的文档在同一页面下的内容。

即主机名、协议、端口相同。

//下表给出了相对http://store.company.com/dir/page.html同源检测的示例:
//URL 结果 原因
http://store.company.com/dir2/other.html 成功
http://store.company.com/dir/inner/another.html 成功
https://store.company.com/secure.html 失败 协议不同
http://store.company.com:81/dir/etc.html 失败 端口不同
http://news.company.com/dir/other.html 失败 主机名不同

原生ajax和jsonp的更多相关文章

  1. 原生javascript封装ajax和jsonp

    在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...

  2. 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法

    JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  3. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  4. 原生JS实现AJAX、JSONP及DOM加载完成事件

    一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

  5. 框架----Django之Ajax全套实例(原生AJAX,jQuery Ajax,“伪”AJAX,JSONP,CORS)

    一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

  6. 原生ajax请求和jsonp

    1.原生ajax请求 var obj = new XMLHttpRequest(); obj.open("POST", url, true); obj.setRequestHead ...

  7. 用原生JS实现AJAX和JSONP

    前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...

  8. 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  9. jQuery的$.ajax方法响应数据类型有哪几种?本质上原生ajax响应数据格式有哪几种,分别对应哪个属性?

    jQuery的$.ajax方法响应数据类型有:xml.html.script.json.jsonp.text 本质上原生ajax响应数据格式只有2种:xml和text,分别对应xhr.response ...

随机推荐

  1. docker搭建gitlab,设置邮件提醒,并运行runner

    接着http://www.cnblogs.com/wsy1030/p/8431837.html 在另一台机子运行gitlab: docker run --name='gitlab' -d -p 222 ...

  2. 群晖MyDS账号注册--实现使用QuickConnect外网访问

    最近公司拿了个NAS给我,让我把它配置好,之前没有接触过这个东西,上网一查,发现就是和去年很火的玩客云和斐讯天天链N1的功能一样,可以实现文件储存和文件共享. 设备型号:群晖DS214SE 系统版本: ...

  3. windows 7 做AP

    启动脚本: @echo off netsh wlan set hostednetwork mode=allow ssid=<ap-name> key=<password> ne ...

  4. maven子模块转化成project

    把maven多模块中的子模块单独形成一个eclipse的project,需要使用导入 选中子模块,右键选择Import... 在选择弹出框中选择Maven--Existing Maven Projec ...

  5. -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment avariable and mvn script match.

    eclipse中使用maven插件的时候,运行run as maven build的时候报错 -Dmaven.multiModuleProjectDirectory system propery is ...

  6. nginx 配置 单页面应用的解决方案

    server { listen 80; server_name example.com; root /var/www/example.com; gzip_static on;  location / ...

  7. [javaSE] 网络编程(URL)

    获取URL对象,new出来,构造参数:String的路径 调用URL对象的getProtocal()方法,获取协议 调用URL对象的getHost()方法,获取主机 调用URL对象的getPath() ...

  8. libevent学习笔记 —— 牛刀小试:简易的服务器

    回想起之前自己用纯c手动写epoll循环,libevent用起来还真是很快捷啊!重写了之前学习的时候的一个例子,分别用纯c与libevent来实现.嗯,为了方便对比一下,就一个文件写到黑了. 纯c版: ...

  9. Python Django ORM基本增删改查

    工程下的urls.py中增加如下: from cmdb import views as cmdb #要把你要操作的项目import进来 urlpatterns = [ url(r'orm', cmdb ...

  10. 理解bind函数

    前言:之前一直不懂这个函数是干嘛的,最近慢慢有点懂了,说一说自己的理解~ 本文按以下3个方面来谈谈bind函数 1)对bind函数的理解: 2)如何使用bind函数 3)自定义bind函数 (http ...