AJAX的概念,即“Asynchronous Javascript And XML”

通过在后台(浏览器的后台)与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面或者使用iframe。

AJAX写法 
  浏览器兼容
    if(window.ActiveXObject){
    //ActiveX是浏览器的插件
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE 678 OPEAR OLD
    }else if(window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();//NEW
    }

状态码
  readyState
    XMLHttpRequest的准备状态,从0~4发生改变
    0:请求未初始化
    1:服务器连接已建立
    2:请求已经接受
    3:请求处理中
    4:请求已完成,且响应已就绪
  status
    200:正常完成
    404:未找到页面
    500:服务器处理错误

ActiveX:就是IE浏览器提供的插件接口

例如:PDFReader ActiveX、FlashPlayer ActiveX、网上银行 ActiveX、XMLHTTP ActiveX

  为什么响应有文本和XML格式
    因为当下最流行的数据交互格式,一种是json(responseText),另外一种是XML(responseXML)
    * JSON.parse(xmlHttp.responseText)

数据格式:
     XML:可扩展标记语言
     HTML:超文本标记语言
    JSON:基本上取代了ajax的responseXML格式
    第一:文件更小
    第二:json格式对于javascript更加友好
    * JSON.parse(jsonString);

代码:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>账户余额:</div>
<b id="balance">0</b>
<button onclick="refreshBalance()">刷新余额</button>
<button onclick="loadDetails()">加载历史交易记录</button>
<div id="details"></div>
<script>
function refreshBalance(){
var xmlHttp;
if(window.ActiveXObject){//native code 系统自带的
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
throw new Error("您的浏览器暂时不支持AJAX,请升级或者更换浏览器");
}
xmlHttp.open("GET","balance.txt");
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
document.getElementById("balance").innerHTML = xmlHttp.responseText;
}
}
//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function loadDetails(){
var xmlHttp;
if(window.ActiveXObject){//native code
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
throw new Error("您的浏览器暂时不支持AJAX,请升级或者更换浏览器");
}
xmlHttp.open("GET","details.xml");
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//document.getElementById("details").innerHTML = ;
console.log(xmlHttp.responseXML.root);
}
}
//xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
</script>
</body>
</html>
 function showJsonp() {
var url=""
var word=encodeURI('H型支柱');
$.ajax({
url:url,
type:'post',
data:{word:word,size:},
dataType:'jsonp',
jsonp:'a',
jsonpCallback:"ss",
success:function (data) {
console.log(data)
}
})
}

参数:jsonp :在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

jsonCallback: 是客户端注册的,获取 跨域服务器 上的json数据 后,回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为


jsonpCallback({msg:'this is json data'})  

jsonp参考:http://justcoding.iteye.com/blog/1366102

 

参考地址:

jQuery之Ajax--全局Ajax事件处理器

ajax相关知识点的更多相关文章

  1. @RequestBody和@RequestParam注解以及返回值,ajax相关知识点

    关于前后端传递json数据这块查了好多资料,好多地方还是不清楚,先记录一下清楚的地方. 如果我们前端使用ajax发json数据,一般都加上contentType:'application/json;c ...

  2. UITableView相关知识点

    //*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...

  3. Android开发涉及有点概念&相关知识点(待写)

    前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...

  4. IOS开发涉及有点概念&相关知识点

    前言,IOS是基于UNIX的,用C/C+/OC直通系统底层,不想android有个jvm. 首先还是系统架构的分层架构 1.核心操作系统层 Core OS,就是内存管理.文件系统.电源管理等 2.核心 ...

  5. IOS之UI--小实例项目--添加商品和商品名(使用xib文件终结版) + xib相关知识点总结

    添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...

  6. 学习记录013-NFS相关知识点

    一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...

  7. TCP/IP 相关知识点与面试题集

    第一部分:TCP/IP相关知识点 对TCP/IP的整体认 链路层知识点 IP层知识点 运输层知识点 应用层知识点 (这些知识点都可以参考:http://www.cnblogs.com/newwy/p/ ...

  8. Python开发一个csv比较功能相关知识点汇总及demo

    Python 2.7 csv.reader(csvfile, dialect='excel', **fmtparams)的一个坑:csvfile被csv.reader生成的iterator,在遍历每二 ...

  9. Caffe学习系列(二)Caffe代码结构梳理,及相关知识点归纳

    前言: 通过检索论文.书籍.博客,继续学习Caffe,千里之行始于足下,继续努力.将自己学到的一些东西记录下来,方便日后的整理. 正文: 1.代码结构梳理 在终端下运行如下命令,可以查看caffe代码 ...

随机推荐

  1. ReactNative系列组件用法(一)

    首先我们来认识view 改变一些特性,再来看看项目的变化 我们新增flex布局的一些属性,再来看看项目的变化 接下来我们来看看如果获取屏幕的分辨率 关于图片的用法,reactNative这里也是很神奇 ...

  2. 代码大片出现报错,请重新编译——Clean

    工作空间中项目莫名大片报错,可能是各种意外原因导致的代码编译错误,可以选 菜单栏的 Project,Clean一下全部项目,系统会自动重新编译所有项目,有时会有奇效.

  3. echarts3地图如何添加点击事件? 点击地图相应的区域ajax获取并展示本区域省下面所有市的信息

    myChart.on('click', function (params) { var city = params.name; loadChart(city); });

  4. dojo.js --dojo Quick Start/dojo入门手册1

    我看了http://www.cnblogs.com/mylem/archive/2009/11/11/1600984.html这篇博客以后 ,就开始设计自己的代码,其实很多解释都是在我的代码里,所以就 ...

  5. docker存储与网络

    目录 Docker存储 挂载主机目录 创建一个数据卷 挂载一个宿主机目录作为数据卷 数据卷容器 创建一个数据卷容器 利用数据卷容器迁移数据 删除数据盘 Docker网络 简介 bridge网络 bri ...

  6. 私有仓库GitLab快速入门篇

    私有仓库GitLab快速入门篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 安装文档请参考官网:https://about.gitlab.com/installation/#ce ...

  7. 设计模式---组件协作模式之观察者模式(Observer)

    一:概念 Observer模式的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态 Observer模式提供给关联对象一种同步通信的手段,使得某个对象与依赖他的其他对象之间保 ...

  8. MyBatisPlus环境下使用MyBatis的配置类

    通过@Configuration使用MyBatis配置类的资料比较少,大部分都是通过XML的形式.找了好久,最终还是通过官方的文档找到了解决方法:http://www.mybatis.org/spri ...

  9. 转 -- Python: 多继承模式下 MRO(Method Resolution Order) 的计算方式关乎super

    大家可能已经知道了,在 Python 3(Python 2 的新式类)中多继承模式是使用 C3 算法来确定 MRO(Method Resolution Order) 的. 那么具体是怎么计算的呢?本文 ...

  10. HITS算法--从原理到实现

    本文介绍HITS算法的相关内容. 1.算法来源 2.算法原理 3.算法证明 4.算法实现 4.1 基于迭代法的简单实现 4.2 MapReduce实现 5.HITS算法的缺点 6.写在最后 参考资料 ...