2015.3.17Ajax小练习

网页被浏览器处理时,动态供给网页动态数据。以动态数据建造的网页成为数据驱动网页,数据负责网页的内容。

JavaScript内置了动态数据的支持,这种支持就是ajax。一直以来都对ajax非常的感兴趣,今天做了一个小实验。先来描述一下ajax,ajax能让客户端的浏览器能与网络服务器产生一些“对话”,动态数据也因此而成真,脚本可向服务器请求部分数据,服务器利用ajax传递数据,脚本收下数据并动态的将数据整合到网页里。而网页并不需要全部刷新和重新加载,这样就能大大提高用户的体验和提升速度。ajax是Asynchronous Javascript And XML的缩写,这里也提到了一个xml的概念,xml是种为任何类型的数据设计格式的标记语言。xml可以用自己的标签标示数据,xml与html相似,都是文本。还有xhtml,XHTML是遵守xml的较严格语法规则的新版html。

整个ajax的交互模型是这样的,在实行客户端浏览器与服务端的数据通信时,ajax以请求(request)与响应(response)为中心概念。浏览器送出请求到服务器,并等待响应,服务器收到响应,开始工作,创建响应,服务器脚本就不是JavaScript了,但JavaScript很厉害啊,现在node.js可以担负部分简单的服务器职责并且功能还在不断的扩展。接下来就是服务器创建给浏览器的响应,把客户端请求的数据打包由ajax响应返回,浏览器解开响应中打包的数据,并小心的将数据整合至网页中。

javascript内置一个XMLHttpRequest的对象,用于发起ajax请求并处理ajax响应。包含了很多支持ajax的方法与特性。

readyState请求的状态代码:0(未初始)1(开启)2(已传送)3(接受中)4(已载入)

status(HTTP的请求状态代码,例如404(NOT FOUND)或200(ok))。

上述两个特性,可判断ajax请求是否以合法的响应结束。

onreadystatechange请求状态改变时会被调用的函数引用。(这个特性的独特之处,在于它存储一个引用,引用于ajax请求的状态改变时被调用的自定义事件处理器,这个事件处理器就是处理响应的地方)

responseText(由服务器返回的响应数据,格式为纯文本字符串)和responseXML(由服务器返回的响应数据,格式为XML节点树构成的对象。)这个两个特性存储服务器返回的Ajax响应数据。

send()传送请求,交给服务器处理。

open()准备请求,指定请求的类型(get,post),URL及其他细节。

send()和open()这两个方法合作准备Ajax骑牛,而后返回给服务器。

abort()这个方法只用在需要取消ajax请求的时候。

由于XMLHttpRequest相当复杂,即使最基础的请求,也需要很多的代码,于是这里把这个基本请求语句封装成一个js模块。方便调用实验,源码如下:

接下来是原生js写的异步加载,这里服务端是用的C#,

原生js的ajax方法:

执行结果:点击前:

执行后:

第一次原生异步成功之后,现在试一试jquery的ajax方法

一个是jquery的load加载文档,一个是post和get联接一起使用的方法。

body部分:

js部分

服务端部分:

运行结果:

时间: 2024-11-03 15:35:39

2015.3.17Ajax小练习的相关文章

2014年总结、2015年的小计划--女生程序员小感想

时间是这个世界是最不好把握的东西! 一转眼自己已经二十五岁了,来上海也快两年了,虽然现在真的是一无所有,但是一直很努力在追求自己想要的生活.想要好好总结一下自己这一年以来的生活,却发现书到用时方恨少,少时不努力这时却无法用优雅的言语来表述此时的心绪. 简单说一下这一年来做过的事情吧 来了场说走就走的旅行(去深圳疯狂了将近半个月) 获得原公司季度优秀员工(得了1000块钱奖金) 帮以前长沙的老板做了个小型的后台管理系统(赚了点小钱) 自学考试过了7门(明年继续努力) 换了新工作,来到了携程 总结一

2015省赛小感想

上个月26号,我有幸参加了今年的浙江省省赛.第一次参加正式的ACM比赛,心里略有点小激动.我的队友们也是第一次参加,还好同行的还有学长学姐们的队伍. 早上是热身赛,共四道题,第一题很简单,马上就A掉了.但第二题是到概率题( 第二天得知该题是ZOJ 3696 ),而且好像还是概率论中关于什么分布的.然后队友又看了第三第四题,把题意告诉我后,我也一时不知道怎么做.看着已经有队伍已经A出了第二题,甚至第三第四题也有了,我的心态一下子不好了!!! 我记不清当时到底具体在想什么,只知道当时的我心态已经乱了

noip2012~2015刷题小记录

2012d1t1 密码 模拟题 1 #include<cstdio> 2 #include<cstdlib> 3 #include<cstring> 4 #include<cmath> 5 #include<iostream> 6 #include<algorithm> 7 #include<set> 8 #include<queue> 9 #include<vector> 10 using nam

2015.3.9小练习(无刷新留言板)

效果如图:(图中是我的狗~名叫坨坨)一号女主角. 代码如图:

2015.3.7小练习(动态增加元素及表格,以及浏览器兼容问题)

最近在对之前理解的HTML/CSS/javaScript查漏补缺,真是学会了Jquery马上就开始反感用javascript写很多jquery一下子就可以实现的选择和操作. 今天是做了一个根本无界面美观性可言的实验part,乱七八糟大乱炖,只为练习功能. 动态增加元素 function addBtn() { var textField = document.getElementById("main"); var input = document.createElement("

2015.3.9小练习(投票百分比jquery)

投票百分比:CSS太丑了不要介意……先实现功能,其实我CSS还是可以的.基本的效果都做的出来…… 代码如下: <!DOCTYPE html><html><head><title>投票</title><script src="..\jquery\jquery-2.1.3.js" type="text/javascript" ></script><script src="

2015年开年小脚本

#!/bin/bash XY=(1 1) OP=(1 1) YR=(2 0 1 5) get_window_size() {   echo -ne "\e[2J"   SZ=($(stty -a | tr ';' '\n' | awk '/rows|columns/{print $2}')) } echo -ne "\e[?1049h\e[?25l" trap 'echo -ne "\e[?1049l\e[?25h"; exit' INT get

【AI创新者】小蚁首架张骏峰:让图像AI人尽可用转载

张骏峰,小蚁科技首席架构师,负责小蚁AI图像相关算法架构.主要包括:小蚁智能摄像机的智能报警服务.小蚁智能行车记录仪的辅助驾驶ADAS服务.小蚁运动相机App的图像风格迁移技术以及小蚁微单App的图像视频编辑技术.其团队包括移动开发.前端.后台.算法,成员分布在北京及以色列.张骏峰于2015年加入小蚁,此前,张就职于微软长达14年,参与过Windows, .Net Framework, MSN, Office, Lync, Skype等产品的研发工作. 小蚁科技成立于2013年,是一家年轻的互联

小tips: 使用&amp;#x3000;等空格实现最小成本中文对齐

一.重见天日第二春 11年的时候,写了篇文章“web页面相关的一些常见可用字符介绍”,这篇文章里面藏了个好东西,就是使用一些空格实现个数不等的中文对齐或等宽.见下表: 字符以及HTML实体 描述以及说明   这是我们使用最多的空格,也就是按下space键产生的空格.在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个).要使用html实体表示才可累加.为了便于记忆,我总是把这个空格成为“牛逼(nb)空格(sp – space)”,虽然实际上并不牛逼.该空格占据宽度受字体影响明显而强