Ajax与jsonp
1、ajax的概念
AJAX = Asynchronous Javascript And XML
(AJAX = 异步 javascript 和 xml)
AJAX是一种无需重新加载整个网页的情况下,能更新部分网页的技术。
2、工作原理
A、ajax就是js通过一个网站去加载数据,这个过程通常是用户不可见的。
B、传统的网页(不适用ajax)如果需要更新内容,必须重新加载整个网页。
3、关于同步与异步
同步需要等待返回结果才能继续,异步不必等待,一般需要监听异步的结果。
同步是在一条直线上的队列,异步不在一个队列上,各走各的
例如:
添加购物车问题。采取同步方式,每加入一项购物车,则需要等待页面重新加载后再执行其他操作。
而使用异步方式,则只需监听,无需等待即可执行其他操作。相对而言,异步加载优势更大,ajax优势由此可见。
4、创建ajax对象(以及兼容)
(1)创建XMLHttpRequest对象
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
};
(2)打开和服务器的链接
open(method,url,asyn)
参数:
method:string,请求的类型get或post
url:string,文件在服务器上的位置
asyn:Boolean,true(异步)或false(同步)
同步需要等待返回结果才能继续,异步不必等待
(3)发送给服务器
xhr.send()将请求发送到服务器(get请求)
xhr。send(string) 仅用于post请求
(4)检测服务器的请求状态
onreadystatechange事件(相应就绪状态)
readyState 和 status属性存有XMLHttpRequest的状态
readyState 改变时就会触发 onreadystatechange 事件
readyState从0到4发生变化
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3、请求处理中
4、请求已完成
status等于200:“OK”
等于404:未找到页面
当readyStatus为4并且status为200时,表示相应已就绪。
5、XMLHttpRequest对象的重要性
如需获得来自服务器的响应,请使用XMLHttpRequest对象的:
responseText或responXML属性
responseText获得字符串形式的响应数据
responseText获得XML形式的响应数据
如来自服务器的响应并非XML,用responseText属性reponseText返回字符串形式的响应,可以这样使用:Div.innerHTML = xhr.responseText;
6、关于ajax请求方式get和post的区别:
GET:更常用,更方便;性能好;明文发送数据,没有post安全;数传输大小有限制,数据听过URL传递,但是URL有一定的长度限制。、
POST:使用相对较少;性能只有get的1/3左右;比get稍微安全一点;没有数据大小限制;
7、关于跨域
跨域可以简单的理解为从一个域名访问另一个域名,处于安全考虑,浏览器不允许这么做;
备注:img、script、iframe等元素的src属性可以直接跨域请求资源。
8、ajax跨域
1、可以让服务器去别的网站获取内容返回页面
2、给页面的ajax一个url,ajax把这个url传给服务器,由服务器去访问地址。
9、jsonp跨域
jsonp就是利用script标签的跨域能力请求资源,显然目的还是json,而且是跨域获取利用js构造一个script标签,把json的url赋给script的src属性,把这个script插入到dom里,让浏览器去获的到,callback({"name":"jack"}),callback是页面存在的回调方法,参数就是得到想得到json回调方法要遵从服务端的月sing一般使用callback或者cb.
Ajax与jsonp的更多相关文章
- json和jsonp的区别,ajax和jsonp的区别
json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...
- 原生javascript封装ajax和jsonp
在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...
- ajax和jsonp的封装
一直在用jQuery的ajax,跨域也是一直用的jQuery的jsonp,jQuery确实很方便,$.ajax({...})就可以搞定. 为了更好的理解ajax和jsonp,又重新看了下书,看了一些博 ...
- 针对AJAX与JSONP的异同
针对AJAX与JSONP的异同 1.ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架 ...
- ajax和jsonp使用总结
前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理:实例化xmlhttp对 ...
- ajax 和jsonp 不是一码事
由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...
- 关于jQuery.ajax()的jsonp碰上post详解
前言 以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑. 下面来一起看看详细的介绍: 关于跨域请求与 ...
- 原生 JavaScript 实现 AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- ajax和jsonp
ajax和jsonp 前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理: ...
- Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...
随机推荐
- HTTP请求处理流程-SpringMvc
1.在SpringMVC的http请求处理过程中,包括了前端控制器(DispatcherServlet).处理映射器(HandlerMapping).处理适配器(HandlerAdapter).处理器 ...
- odoo 的字段。orm对象
OpenERP ORM 对象方法列表 OpenERP对象支持的字段类型有,基础类型:char, text, boolean, integer, float, date, time, datetim ...
- Oracle汉字用户名数据脱敏长度不变,rpad函数使用
信息安全考虑,有时需要对用户名称进行数据脱敏. 针对Oracle数据库,进行取数数据脱敏处理 脱敏规则: 长度小于9个字符,只保留前3个汉字与后3个汉字,中间全部由*填充. 长度9个字及以上及奇数,隐 ...
- my.等级限制
1.20190405 “春之恋曲 4月5日双平台新服开服公告”,20190426 上去新建了一个号 发现等级限制是 66级(2天后开启新等级) 20190412 “胭脂雪 4月12日双平台新服开服 ...
- @media响应式布局
@media可以根据屏幕尺寸调节布局 @media screen and (min-width:100px) and (max-width:200px){ div { color:red; } } 在 ...
- UML图及Visio 2010使用总结
1. 关于UML9种图的详细介绍: 参考链接A:UML 九种图详解 参考链接B:UML的九种图+包图 2. 深入探究类图: 类图间的关系:泛化 .继承.实现.依赖.关联.聚合.组合: 参考链接A:ht ...
- HTML5获取地理经纬度并通过百度接口得到实时位置
注:用的时候将获取北京位置那放到获取经度纬度后面即可 -----------实际用的时候的代码如下:start -------- var myCity;getLocation()function g ...
- 使用vmware虚拟机安装linux
- Robot Framework(用户关键字)
在 Robot Framework 中关键字的创建分两种:系统关键字和用户关键字.系统关键字需要通过脚本开发相应的类和方法,这个我们将在后面的章节介绍.用户关键字的创建就要简单得多,它主要利用现有的系 ...
- vue 坑之 vuex requires a Promise polyfill in this browser
android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1 ...