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的更多相关文章

  1. json和jsonp的区别,ajax和jsonp的区别

    json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...

  2. 原生javascript封装ajax和jsonp

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

  3. ajax和jsonp的封装

    一直在用jQuery的ajax,跨域也是一直用的jQuery的jsonp,jQuery确实很方便,$.ajax({...})就可以搞定. 为了更好的理解ajax和jsonp,又重新看了下书,看了一些博 ...

  4. 针对AJAX与JSONP的异同

    针对AJAX与JSONP的异同       1.ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架 ...

  5. ajax和jsonp使用总结

    前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理:实例化xmlhttp对 ...

  6. ajax 和jsonp 不是一码事

    由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...

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

    前言 以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑. 下面来一起看看详细的介绍: 关于跨域请求与 ...

  8. 原生 JavaScript 实现 AJAX、JSONP

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

  9. ajax和jsonp

    ajax和jsonp 前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理: ...

  10. Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别

    为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...

随机推荐

  1. 程序设计中的dry原则

    DRY:dont repeat yourself 假设一个逻辑(代码块)会重复两次或者以上,应该写成函数被调用 为什么呢,实际上,我们处处可见重复性的代码.这除了增加工作量之外,还会增加维护难度. d ...

  2. Ubuntu下Nginx安装

    1.1 安装Nginx $sudo apt-get install nginx Ubuntu安装之后的文件结构大致为: 所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经安排在了/etc/ ...

  3. 51nod1238. 最小公倍数之和 V3(数论)

    题目链接 https://www.51nod.com/Challenge/Problem.html#!#problemId=1238 题解 本来想做个杜教筛板子题结果用另一种方法过了...... 所谓 ...

  4. Pycharm与github的秘密

    GIT介绍 GIT文章请看老男孩教育-银角大王的博客: http://www.cnblogs.com/wupeiqi/articles/7295372.html Git 是一个开源的分布式版本控制软件 ...

  5. 128th LeetCode Weekly Contest Capacity To Ship Packages Within D Days

    A conveyor belt has packages that must be shipped from one port to another within D days. The i-th p ...

  6. HihoCoder - 1513 bitset处理五维偏序

    题意:给出\(n<3e4\)个有序组\((a,b,c,d,e)\),求对第\(i\)个有序组有多少个\(j\)满足\((a_j<a_i,b_j<b_i,c_j<c_i,d_j& ...

  7. Python3.0版本 从听说python可以做爬虫到自己第一成功做出爬虫的经历

    前言 我自己是个python小白,工作也不是软件行业,但是日常没事时喜欢捣鼓一些小玩意,自身有点C语言基础. 听说python很火,可以做出爬虫去爬一些数据图片视频之类的东东,我的兴趣一下子就来了.然 ...

  8. Java中String与Date格式之间的转换

    转自:https://blog.csdn.net/angus_17/article/details/7656631 经常遇到string和date之间的转换,把相关的内容总结在这里吧: 1.strin ...

  9. Java - 自定义异常(尚学堂第六章异常机制作业计算平均数)

    编写一个计算N个学生分数平均分的程序.程序应该提示用户输入N的值,如何必须输入所有N个学生分数.如果用户输入的分数是一个负数,则应该抛出一个异常并捕获,提示“分数必须是正数或者0”.并提示用户再次输入 ...

  10. 在循环中使用continue语句

    continue;//表示继续,当遇到continue语句时,则结束当次循环继续执行下一次循环  例子: class For09{ public static void main(String[ ]a ...