谈谈你对aja的理解(一、二)

什么是Ajax

Ajax是Asynchronous JavaScript and XML的缩写,这一技术能够向服务器请求额外的数据而无需卸载整个页面,会带来良好的用户体验。传统的HTTP请求流程大概是这样的,浏览器向服务器发送请求-〉服务器根据浏览器传来数据生成response-〉服务器把response返回给浏览器-〉浏览器刷新整个页面显示最新数据,这个过程是同步的,顺序执行。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)从服务器获取数据,这里的异步是指脱离当前浏览器页面的请求、加载等单独执行,这意味着可以在不重新加载整个网页的情况下,通过JavaScript接受服务器传来的数据,然后操作DOM将新数据对网页的某部分进行更新,使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。

ajax的理解(一)

Ajax是Asynchronous Javascript And XML的缩写。 作用:通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。 1、创建XML

Ajax是Asynchronous Javascript And XML的缩写。

作用:通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。

1、创建XMLHttpRequest对象

var xhr =  new XMLHttpRequest()

对于IE早期版本(IE7及以下版本)使用,new ActiveXObject(\"Microsoft.XMLHTTP\")、new ActiveXObject(\"Msxml2.XMLHTTP\")等方式创建对象

2、XMLHttpRequest对象常用属性和常用方法

属性

readystate       返回XMLHTTP请求的当前状态码
    state               返回当前请求的HTTP状态码
    statusText       返回HTTP状态码对应的文本

方法

onreadystatechange    监听readystate和state状态

ajax的理解(二)

ajax方法:通过 HTTP 请求加载远程数据
get方法: 通过远程 HTTP GET 请求载入信息
post方法:通过远程 HTTP POST 请求载入信息

1、创建XMLHttpRequest对象

function createXHR() { return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); }

2、将键值对转换成拼接串

function params(data) { var a = []; for (var i in data) { a.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i])); } return a.join("&"); }

3、封装ajax方法

参数

method       请求方法      get和post          默认get
  data            键值对         {key:value}
  url               链接地址
  cache           缓存           true   和  false    默认true带缓存
  success       成功             error           异常

function ajax(args) { var xhr = createXHR(); var data = http://www.cnblogs.com/kuikui/archive/2012/01/12/params(args.data); if (/get/i.test(args.method)) { // 当为get方式时 将data直接拼接到url后 args.url += "?" + data; } if (!args.cache) { //无缓存 if (args.url.indexOf("?") < 0) { //当无参数data args.url += "?"; } args.url += "&" + (new Date()); // Math.random(); } xhr.open(args.method, args.url, true); xhr.onreadystatechange = function () { if (4 == xhr.readyState && 200 == xhr.status) { args.success(xhr.responseText, xhr.responseXML); } else { args.error(); } } if (/post/i.test(args.method)) { xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data); } else { xhr.send();

时间: 2024-09-27 21:18:22

谈谈你对aja的理解(一、二)的相关文章

【区块链之技术进阶】扒一扒某乎上面对于区块链的理解(二)

在前面的一篇文章里,咱们通过镁铝COO妹纸的(据说萌萌哒)从金融的角度(当然也带了有些技术角度)为大家分享了对于区块链的理解,人家妹纸写的文章自带卖萌属性,以故事开头,并且以故事结尾,加上那张关于"看上去屌炸了の工作原理"的大图(这张图上基本涵盖了区块链技术的所有技术要点,不知道大家有木有仔细看)介绍了创始块,区块,挖矿数学以及目标数,随机数等等这些概念,当然妹纸也以区块链行业从业者的角度告诉我们,区块链的研究目前还在瓶颈区,还有很多东西需要探索. 本文是[区块链之技术进阶]的第五篇文

谈谈对Spring IOC的理解

学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家分享网上的一些技术大牛们对Spring框架的IOC的理解以及谈谈我对Spring Ioc的理解. 一.分享Iteye的开涛对Ioc的精彩讲解 首先要分享的是Iteye的开涛这位技术牛人对Spring框架的IOC的理解,写得非常通俗易懂,以下内容全部来自原文,原文地址:http://jinniansh

谈谈我对docker的理解_docker

先给大家说下docker概念 Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).bare metal.OpenStack 集群和其他的基础应用平台. Docker优势: 更快速的交付和部署(一次创建和配置,可以在任意地方正常运行) 更高效的虚拟化(不需要hypervisor支持,内核级虚拟化) 更轻松的迁移和扩展(在任意平台移植) 更简单的管理() 关于docker理解

谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 所有题目汇总在我的 Github .   2.类似下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签为 div: <div>&l

谈谈我对企业网站营销的看法(二)

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 之前我有说过针对企业网站推广营销的硬技术,对企业网站的优化达到一定程度之后,就要从企业网站走出来,向其他平台推广. (一) 向相关行业网站平台推广 在行业网站上推广时比较有针对性的,面向的受众是关心这个行业的是所有用户,在行业网站的用户中的潜在客户都是对产品具有专业知识的,在这种网站上作营销以获得潜在客户就需要用专业知识与他们沟通,经常参与他

GCD深入理解(二)

转自@nixzhu的GitHub主页(译者:Riven.@nixzhu),原文<Grand Central Dispatch In-Depth: Part 2/2>   欢迎来到GCD深入理解系列教程的第二部分(也是最后一部分).   在本系列的第一部分中,你已经学到超过你想像的关于并发.线程以及GCD 如何工作的知识.通过在初始化时利用 dispatch_once,你创建了一个线程安全的 PhotoManager 单例,而且你通过使用 dispatch_barrier_async 和 dis

谈谈JavaScript中function多重理解

JavaScript 中的 function 有多重意义.它可能是一个构造器(constructor),承担起对象模板的作用: 可能是对象的方法(method),负责向对象发送消息.还可能是函数,没错是函数,和对象没有任何关系独立存在的可以被调用的函数. 由于语言设计者的妥协,在 JavaScript 加入了一些 class 相关的特性,以使 JavaScript 看起来确实象 Java,可以 "面向对象".虽然 JavaScript 添加了 new 和 this, 但却没有 clas

谈谈JavaScript中function多重理解_javascript技巧

JavaScript 中的 function 有多重意义.它可能是一个构造器(constructor),承担起对象模板的作用: 可能是对象的方法(method),负责向对象发送消息.还可能是函数,没错是函数,和对象没有任何关系独立存在的可以被调用的函数. 由于语言设计者的妥协,在 JavaScript 加入了一些 class 相关的特性,以使 JavaScript 看起来确实象 Java,可以 "面向对象".虽然 JavaScript 添加了 new 和 this, 但却没有 clas

谈谈我对SEO的理解和经验

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 大家好,我是一位身经百战的针对网站优化排名(SEO)的砖家(嘿嘿),今天发此博文,一方面是总结下自己对SEO的理解和经验,下面我就解释下SEO的含义. 下面解释来自:百度百科 搜索引擎最佳化(Search Engine Optimization),又称为搜索引擎优化,为近年来较为流行的网络营销方式,主要的目的是增加特定关键字的曝光率以增加网站