深入学习Ajax
1.什么是Ajax?
AJAX的全称是Asynchronous Javascript And XML (异步的JavaScript和XML)。是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
ajax是以下几种技术的组合应用:
– 基于web标准(standards-based presentation)XHTML+CSS的表示;
– 使用 DOM(Document Object Model)进行动态显示及交互;
– 使用 XML 和 XSLT 进行数据交换及相关操作;(现在更多的是使用JOSN)
– 使用 XMLHttpRequest 进行异步数据查询、检索;
– 使用 JavaScript 将所有的东西绑定在一起。
2.Ajax工作原理
Ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证(比如判断用户是否输入了数据)和数据处理(比如判断用户输入数据是否是数字)等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
3.创建Ajax的步骤
1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
XMLHttpRequest对象是Ajax的核心,它是Ajax实现的关键,发送异步请求、接受响应以及执行回调都是通过它来完成。
2.使用XMLHttpRequest对象创建请求
同步模式:发出的请求会暂停所有javascript代码的执行,知道服务器获得响应为止,如果浏览器在连接网络时或者在下载文件时出了故障,页面就会一直挂起。
异步模式:发出的请求,请求对象收发数据的同时,浏览器可以继续加载页面,执行其他javascript代码
3.处理响应:监听readyStates属性值的变化,写回调函数处理服务器返回的数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
readyState :ajax的状态
0:请求未初始化(还没有调用 open())。
1:建立请求:但是还没有发送(还没有调用 send())。
2:发送请求:正在处理中(通常现在可以从响应中获取内容头)。
3:请求处理中:已有部分数据可用了,但是这时获取部分数据会出现错误。
4:响应已完成:此时可以通过通过responseBody和responseText获取完整的回应数据。
status属性:
200:"OK"
404: 未找到页面
500:服务器内部错误”
4.使用XMLHttpRequest对象发送请求
xhr.send();
发送请求方式:
get:使用get方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null或为空。
xhr.open("GET",url?name="张三"&age=18,true);
xhr.send(null);
post:需要先使用 setRequestHeader()来添加请求头设置post编码方式:。然后在send()方法中发送的数据:
xhr.open("post", url, true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send("name=张三&age=18");
4.XMLHttpRequest对象的属性和方法
5.Servlet响应请求
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//最好把请求和响应的编码设置成utf-8
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8"); PrintWriter out = response.getWriter();
out.write(数据);
}
数据最好以json的方式发给页面,然后利用eval函数将返回的文本转化成js对象
深入学习Ajax的更多相关文章
- 学无止境,学习AJAX,跨域(三)
学习AJAX其实有个很重要的应用,就是为了执行另外几个站点的ASP,返回结果. 真正用起来,发现2个问题,>_> 不许笑,一向做DELPHI,接触ASP不多的我,的确问题大堆. 第一个问题 ...
- 由浅入深学习ajax跨域(JSONP)问题
什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...
- 学无止境,学习AJAX(一)
什么是AJAX?异步JavaScript和XML. AJAX是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的 ...
- 学习ajax总结
之前公司的ajax学习分享,做一点总结,加深记忆 什么是ajax? 异步的的js和xml,用js异步形式操作xml,工作主要是数据交互 借阅用户操作时间,减少数据请求,可以无刷新请求数据 创建一个对象 ...
- 学习Ajax小结
Ajax 学习 1.ajax的概念 局部刷新技术,不是一门新技术,是多种技术的组合,是浏览器端技术 2.作用 可以实现 ...
- 学习ajax 总结
一.服务器客户端基础知识 通信是指不同计算机程序的通信,单单通过ip地址就能知道你找的是哪一台计算机,但是不知道是计算机上的哪个应用程序,要想知道是哪个程序就必须通过端口.这时候就可以问端口到底是什么 ...
- 学无止境,学习AJAX(二)
POST 请求 一个简单 POST 请求: xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send(); ...
- 学习Ajax
1.XHR对象 IE7+.Firefox.Opera.Chrome和Safari都支持原生XMLHttpRequest对象,IE6不支持,只支持ActiveXObject对象,该对象在IE11中已经不 ...
- 对学习Ajax的知识总结
1.对Ajax的初步认识 1.1. Ajax 是一种网页开发技术,(Asynchronous Javascript + XML)异步 JavaScript 和 XML: 1.2.Ajax 是异步交互, ...
- [Django学习]Ajax访问静态页面
Web开发中常用的一种开发方式是:通过Ajax进行系统的交互,采用Ajax进行交互的时候,更多的时候传输的是JSON格式的数据. 所以开发中我们需要将数据格式转化成JSON,请参见:https://w ...
随机推荐
- python之-- socket 基础篇
socket 网络模块 注意事项:在python3中,所有数据的传输必须用bytes类型(bytes只支持ascii码)所以在发送数据的时候要么在发送的字符串前面加 'b',要么使用encode('u ...
- zoj4028 LIS
差分约束瞎搞一下,话说这个数据不知道怎么回事,我的图按道理而言最多只有4n条边,开5n还不够??必须6n?? 约束条件首先根据f函数可建立两点之间的约束,不妨设d[i]为i到0的距离,则对于f[i] ...
- POJ 3159 【朴素的差分约束】
好吧终于知道什么是“高大上”的差分约束了.嗷嗷 题意: 小朋友们分糖果,某个小朋友不想另外一个小朋友分到的糖果数比自己多N块以上. 求编号为N的小朋友最多比编号为1的小朋友多分多少块糖果. 思路: 差 ...
- 2017多校Round2(hdu6045~hdu6055)
补题进度:10/11 1001(不等式) 根据题意列不等式,解一解就行了 1002(套路) 题意: 给定一个随机产生的1e6*1e6的矩阵和一个1e3*1e3的矩阵,你要回答这个1e3*1e3的小矩阵 ...
- rror Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Editor and reconnec
在mysql5中,可以设置safe mode,比如在一个更新语句中 UPDATE table_name SET bDeleted=0; 执行时会错误,报: You are using safe upd ...
- Linux 的 Socket IO 模型
前言 之前有看到用很幽默的方式讲解Windows的socket IO模型,借用这个故事,讲解下linux的socket IO模型: 老陈有一个在外地工作的女儿,不能经常回来,老陈和她通过信件联系. 他 ...
- webpack-Targets(构建目标)
构建目标(Targets) 因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种构建目标(target),你可以在你的 webpack 配置中设置. webpa ...
- 同步定制 Unity团队 程序的C#文件模板
孙广东 2015.7.30 就是把程序制定好的模板(不论什么人能够更改并同步git)放到,unity项目的Editor 目录下, 当程序新建一个C#脚本后就是这个模板了. "81-C# ...
- Please enter a commit message to explain why this merge is necessary.
Please enter a commit message to explain why this merge is necessary. 请输入提交消息来解释为什么这种合并是必要的 git 在pul ...
- Hibernate 之 HQL
通过对Hibernate框架的学习,已经慢慢的对Hibernate有了进一步的了解,接下来我们要说的是HibernateQusery Language(HQL),如果你正在学习SSH框架,那SQL对你 ...