ajax与jsonp中的几个封装函数

首先是ajax里的get 在页面上添加几个标签用作测试 <body> <input type="text" id="user"> <input type="text" id="pass"> <input type="button" id="btn"> </body> js部分: var ouser = document.getE…

原生javascript封装ajax和jsonp

在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> //ajax 和jsonp 跨域的封装 var $={ //封装a…

一直在用jQuery的ajax,跨域也是一直用的jQuery的jsonp,jQuery确实很方便,$.ajax({...})就可以搞定. 为了更好的理解ajax和jsonp,又重新看了下书,看了一些博客,参照他们的代码封装了一个简单的库. 代码地址:http://files.cnblogs.com/zjzhome/ajax.js 使用方法和jQuery类似. 不跨域的话: Z.ajax('test.php', { data: { name: 'zjz', age: 10 }, dataType:…

试试自行封装AJAX和jQuery中的ajax封装的基本使用

封装的套路: 1.写一个相对比较完善的用例2.写一个空函数,没有形参,将刚刚的用例直接作为函数的函数体3.根据使用过程中的需求抽象函数代码记录如下: <script> function ajax (method,url,params,done) { method=method.toUpperCase(); var xhr=new XMLHttpRequest(); var tempArr=[]; if (typeof params=== 'object') { for(var key in…

从 AJAX 到 JSONP的基础学习

目录索引: 一.AJAX的概念二.POST && GET三.原生实现AJAX简单示例 3.1 实现代码 3.2 重点说明四.框架隐藏域 4.1 基本概念 4.2 后台写入脚本 4.3 JS主动判断Iframe的改变 4.4 表单提交数据实战五.JQ 的 AJAX 5.1 load() 5.2 $.get() 5.3 $.post() 5.4 $.getScript() 5.5 $.getJson() 5.6 $.ajax() a. 常用的属性说明 b. 常用的事件说明 c. 全局事件说明…

ajax和jsonp使用总结

前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理:实例化xmlhttp对象,使用此对象与后台通信. ajax的同源策略: ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全考虑. ajax的方法: 1. $.ajax({}): 常用参数: url:请求网络地址 type:请求方式,默认是'GET',常用'POST' dat…

ajax 和jsonp 不是一码事

由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket,因此都不能算是ST2的原生解决方案,原生的只有AJAX. 说到AJAX就会不可避免的面临两个问题,第一…

关于jQuery.ajax()的jsonp碰上post详解

前言以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑. 下面来一起看看详细的介绍: 关于跨域请求与jsonp 跨域:由于受到同源策略(协议.域名.端口三者必须全部相同)的影响,ajax请求会受到限制,要突破这种限制,跨域便产生了.跨域的解决方案有多种,这里不展开阐述,只是针对GET请求中的jsonp跨域解决方案做一下说明. jsonp,本质上jsonp不是xhr异步请求,就是请求了一个js文件,…

原生 JavaScript 实现 AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象连接服务器发送请求接收响应数据…

ajax和jsonp

ajax和jsonp 前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理:实例化xmlhttp对象,使用此对象与后台通信. ajax的同源策略: ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全考虑. ajax的方法: 1. $.ajax({}): 常用参数: url:请求网络地址 type:请求方式,默认是'GET',常…

Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别

为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不知道json数据的猛戳JSON简介以及用法汇总),简单思考写下如下代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>…

06: AJAX全套 & jsonp跨域AJAX

目录: 1.1 AJAX介绍 1.2 jQuery AJAX(第一种) 1.3 原生ajax(第二种) 1.4 iframe“伪”AJAX(第三种) 1.5 jsonp跨域请求 1.6 在tornado中使用jsonp解决跨域请求 1.1 AJAX介绍返回顶部 1.AJAX作用 1. AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 2. AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). 3. AJ…

原生ajax和jsonp

封装方法: function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); //创建 - 非IE6 - 第一步 if (window.XMLHttpR…

AJax与Jsonp跨域访问

一.JavaScript的AJax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML) 设计AJax使用的一种重要技术是XMLHttpRequest对象. 创建XMLHttpRequest对象的方式: xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // IE浏览器支持的创建方式 xmlhttp = new XMLHTTPRequest(); // Fir…

ajax 和jsonp 不是一码事细读详解

由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket,因此都不能算是ST2的原生解决方案,原生的只有AJAX. 说到AJAX就会不可避免的面临两个问题,第一…

用原生JS实现AJAX和JSONP

前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生JavaScript实现AJAX并不难,下面我们可是演示如何实现利用原生JS构建简单的AJAX,还有跨域请求JSONP的实现. AJAX的根本是XMLHttprequest,而一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象连接服务器发送请求接收响应数据下面我…

ajax、反向ajax、jsonp详解

ajax详解什么是ajax 其实ajax已经属于老技术了,现在几乎没人不会用了,在这里主要是把底层的东西给大家分享一下,以备应对装逼的面试官. ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的由来该技术在1998年前后得到了应用. 允许客…

原生JavaScript实现AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象连接服务器发送请求接收响应数据…

Javascript:来一个AJAX封装函数

前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有 jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似…

Ajax请求过程中显示“进度”的简单实现

Ajax在Web应用中使用得越来越频繁.在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击该按钮产生多个并发Ajax请求):调用完成后,图片消失,当前页面运行重新编辑.以下图为例,页面中通过一个Load链接以Ajax请求的方式加载数据(左).当用户点击该链接之后,Ajax请求开始,GIF图片显示“Loading“状态,同时当前页面被“罩住”防止用户继续点击Load按钮(中):Ajax请求…

针对AJAX与JSONP的异同

针对AJAX与JSONP的异同 1.ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装: 2.但ajax和jsonp其实本质上是不同的东西.ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本. 3.其实ajax与jsonp的区别不在于是否跨域,aj…

ajax请求封装函数

写封装函数的套路 1.先写出这个函数原来的基本用法 2.写一个没有形参空函数,将上一步的代码直接作为函数体, 3.根据使用过程中,抽象出来需要变的东西作为形参 function ajax (method, url, params, fun) { method = method.toUpperCase() //在传入method的时候可以忽略大小写 var xhr = new XMLHttpRequest() if (typeof params === 'object') { //如果在地址传入的…

vue中对axios进行封装

在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目), 以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改 src/config.js //api接口前缀 export const apiBaseUrl = 'http://xxx.xxx.xxx.xxx:8888/test/' src/axios.js import axios from 'axios' import qs from 'qs' import { a…

jQuery ajax的jsonp跨域请求

一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法带入服务器,返回结果时回调. 在jQuery中内置了实现JSONP跨域的功能,如果指定为json类型,则会把获取到的数据作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回.为了实现这个目的,他首先尝试使用JSON.parse().如果浏览器不支持,则使用一个函数来构建.JSON数…

第110天：Ajax原生js封装函数

一.Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else { //为了兼容IE6 xhr = new ActiveXObject('Microsoft.XMLHTTP'); } 2.连接服务器 // 连接服务器open(方法GET/POST,请求地址, 异步传输) xhr.open('GET', 'data.txt',…

前端跨域问题，以及ajax，jsonp，json的区别

看了很多网上的资料,小七感觉都没有完全解决我的疑惑以及问题,所以特意拿出通俗易懂的话讲解跨域问题,以及ajax,jsonp,json的区别.首先先说跨域问题什么时候需要跨域?[1]域名不同(即网址不同, www.yangwei.com 和www.wuyu.com 即为不同的域名)什么?你不懂什么叫域名,好,满足你:域名就是网址,域名有顶级域名,一级域名,二级域名...不管是几级域名都是其顶级域名的子域名,拿 www.yangwei.com举例,.com是顶级域名 www.yangwei.com是…

随便讲讲自己了解的ajax在JQ中的应用

首先jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性,最简单的情况下,$.ajax() 可以不带任何参数直接使用. 注意…

vue.js的ajax和jsonp请求

首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax 和 jsonp 使用方法: //在Vue实例类使用 this.$http.get(url, [options]).then(successCallback, errorCallback); var test = new Vue({ el:'#v', data:{ jsonUrl:'xxxx', j…

关于Ajax请求的JS封装函数

每次连接ajax都要重复写很多代码,所以写了一个JS封装函数,如下: 再来解释一下其中obj对象的参数形式: obj={ 'type':提交方式, get/post 'url' : 提交地址, 1.php 'data' : 数据, {"name":123 , "pass":123} 'async': 是否异步, true:异步 false:同步 'callback' : 回调函数 success } 注意点: 1.数组…

jQuery AutoComplete在AJAX UpdatePanel环境中PostBack之后无法工作

前些日子,Insus.NET有实现<ASP.NET MVC使用jQuery实现Autocomplete>http://www.cnblogs.com/insus/p/5638895.html . 但今天尝试把此功能移到ASP.NET Ajax UpdatePanel环境中使用.网页在第一次加载时是没有任何问题,但是一旦网页在PostBack之后,IE下就失灵了,但是FireFox还是可行了. 经Bing搜索,查询到是因为PostBack之后,有对UpdatePanel内容作了更新,这样需要重新…