前面的一篇博文简单的简绍了Ajax基于jQuery的用法,接下来要对Ajax做进一步的介绍,
Ajax请求大致可以通过三种方式发送:原生Ajax,jQuery,伪Ajax。
1.原生Ajax:
  由于Ajax是以XML的格式和后台进行数据传输,所以原生的Ajax即是通过XMLHttpResponse
  对象来完成请求
  XMLHttpResponse对象使用方法:

<script>
function Ajax1() {
var xhr=new XMLHttpRequest();
xhr.open('POST','/ajax_json/',true);//打开
xhr.onreadystatechange=function () {
if(xhr.readyState==4){ //表示接受完毕
res=xhr.responseText; //拿到返回的值
console.log(res) }
xhr.setRequestHeader('k1','v1');//请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.send('name=root;pwd=123'); //开始发送,只能发送字符串 }
}
function submitLoad() {
$('#ifml').load(function () {
var v=$(this).contents().find('body').text()
var obj=JSON.parse(v)
console.log(obj)
})
}
</script>

2.伪Ajax:
HTML中的iframe标签可以实现在本页面中加载内容,所以可以利用iframe这一特性
来实现类似Ajax请求的功能而不需要通过XML的方式,称之为‘伪Ajax’

  <form action="/ajax_json/" method="POST" target="ifml">
<iframe id="ifml" name="ifml"></iframe><br>
<input type="text" name="user" placeholder="username"><br>
<input type="text" name="email" placeholder="email">
<input type="submit" value="form" onclick="submitLoad()">
</form>
<script>
function submitLoad() {
$('#ifml').load(function () {
var v=$(this).contents().find('body').text()
var obj=JSON.parse(v)
console.log(obj.data)
})
}
</script>

web前端开发-Ajax(2)的更多相关文章

  1. web前端开发——AJAX入门

    什么是AJAX AJAX: A New Approach to Web Applications XML AJAX是老技术新思想. 它所包括的内容我们之前都接触过.例如以下: (1)使用XHTML和C ...

  2. web前端开发-Ajax(1)

    1.简单简绍Ajax的功能 Ajax是处于前端和后端之间的这么一个东西,他可以拿到你前端form的内容,并且在你触发Ajax的时候,先将某些数据发送到服务器端,等接受到服务器 返回的数据时,执行某个函 ...

  3. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  4. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  5. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  6. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  7. 面试web前端开发,被打击了

    今天我去面试web前端开发,被打击了,也跟我也有一定的关系,最基础的东西我都没回答好,哎! 主要是我在等我有意向的公司给我发offer,闲着没事,刚好又有公司叫我去面试,我抱着多面一家也没有啥子坏处就 ...

  8. Web前端开发高手进阶

     Web前端开发高手进阶 js框架+Ajax技术01.初识javascript及其语言基础(一)02.初识javascript及其语言基础(二)03.初识javascript及其语言基础(三)及js原 ...

  9. web前端开发和后端开发有什么区别?

    web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...

随机推荐

  1. 将 xml 文件 转为 DataTable

    private static DataTable CreateDataTable(string table) { DataSet dataSet = new DataSet(); string dat ...

  2. Angular 学习笔记——表单验证

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  3. Git简明操作

    我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下 ...

  4. Php如何使用curl

    cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性,以及在PHP中如 ...

  5. 娓娓道来c指针 (2)内存分配

    (2)内存分配 c语言中描写叙述变量的时候经常使用的两个用语 1.作用域:也叫可见域,指的是变量的作用范围. 在哪个范围内.该变量是可见的.能够使用的. 2.生存期:也叫存储期.指的是变量从创建到销毁 ...

  6. linux系统下使用apt-get install 方法安装lamp环境

    1.更新源,获得最近的软件包的列表,列表中包含一些包的信息,比如这个包是否更新过. sudo apt-get update 2.更新系统中已安装的软件包 sudo apt-get upgrade 3. ...

  7. CentOS 安装rz和sz

    在虚机装了CentOS6.4版本,结果ssh上去后发现rz命令不能用.那只有自力更生了,其实很简单,如下: yum install lrzsz 如果本地没有包,需要编译安装了: cd /tmp wge ...

  8. HTTP ----通信机制

    HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: (1)    建立TCP连接 在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立 ...

  9. leetCode 15. 3Sum (3数之和) 解题思路和方法

    3Sum  Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find ...

  10. 零基础学python-1.5 第一个程序

    这一个章节我们来说说怎么建立一个python程序 1.打开idle 2.点击File->new file,然后会弹出一个编辑窗体 3.在编辑窗体里面输入命令代码 程序代码: print(&quo ...