ajax异步传输

2015.12.7 ajax异步传输

1、ajax :不是一个新的技术。

js(XMLHTTPRequest) html css dom xml

这里只是一个新的js的内置对象。这算是js想要变得流行的第二招,第一招是从起名叫做javascript,第二步就是异步传输,获得更棒的用户体验。对于异步传输的起名:依然采用了一个能让自己变火的名字:ajax x就是借助了当时最火的数据传递方式:xml。所以对于异步传输来说可以采用xml作为数据的传递方式也可以采用json作为数据的传递格式。

Ajax的全名叫做:Asynchronous JavaScript And XML

2、作用:在不中断用户操作的前提下,完成用户的提交从而提高用户体验。同时因为是局部刷新所以提高了页面的响应速度,节省了流量,提供了更加高效的网络资源的应用环境。

3、Ajax的使用方式:

1)创建异步请求对象

2)根据一步请求的对象,打开和服务器之间的链接

3)设置(注册)一个回调函数(用来接收服务器做出的响应)

4)发送请求【因为此时才发送请求,所以2、3顺序可以交换】

5)得到回调后,处理响应回来的数据。

4、在get请求的方式下,传递数据仅有2种方式。

1)通过地址栏的问号参数进行传值,

2)通过请求头信息进行传值

3)注:get请求方式下,send方法不可用。

5、在post的请求的方式下,传递数据有3种方式:

1)地址栏的问号参数方式

2)请求头的方式

3)以send方式进行传递,不过:

需要在请求头中:进行这样的设置:【content-type:application/x-www-form-urlencoded】此时服务器会议表单形式接收请求的数据。

6、异步传输的数据,也是以字符串的形式,但是在字符串中又有一定的格式,key=value

7、利用xml传输的格式还是字符串,但是字符串中写的也是xml标签,标签中才是数据

8、还有一个二级联动的例子,通过选择省得到对应的市的下拉菜单中的内容。这个自己也要敲一遍。然后试着利用递归做一个可以访问更多层级的案例。不过一般也就2-3级。总写就会有想法的。

作业:1、课堂例子

2、购物车、修改购买数量、改成异步的

3、json

Ajax说到底是前端的javascript技术,并不涉及到后端的什么,不用想那么神秘。

回调函数的相应设置:当状态是4的时候才有必要进行处理,当其他时段都还不必要。

快哭出来了~,为什么根本不出结果呢!!!

Ajax应用举例:

1)Div浮层式的登录窗口

2)停留在右下角的广告层

3)变换图片div(幻灯新闻)

4)选项卡

5)菜单栏

6)框架的应用

AJAX技术的作用

1)更自然、更流畅的用户体验,对用户的操作即时响应

2)在不中断用户操作的情况下与web服务器进行通信

3)更林敏的响应用户访问,实现近似于桌面应用程序的交互效果

4)通过局部更新页面,降低网络流量,提高网络的使用效率

AJAX(Asynchronous JavaScript And XML)

1)HTML用于建立web表单并确定应用程序其他部分使用的字段

2)javaScript代码试运行AJAX应用程序的核心代码,帮助改进与服务器应用程序的通信。

3)DHTML或DynamicHTML,用于动态更新表单

4)文档对象模型DOM用于处理HTML结构和服务器返回的XML

老师你骗人!!!这个 出不来结果!!!

利用刚刚那种方式取得到的结果是null。并不知道 怎么可以弄出来。但是可以通过参数获得。这个时候通过参数是可以获得值的。

所以结果不能再用head获得,因为head里面就只有:

accept

accept-language

referer

content-type

ua-cpu

accept-encoding

user-agent

host

content-length

connection

cache-control

Cookie

这几个属性,但是设置过Content-type之后,就可以允许在send里面以表单的形式,将数据发送出来。详情看postwithsend和TestServlet5里面的设置。自己做的时候出现的一些问题:

问题就是不知道哪里出了问题。

哦哦哦!想起来了,刚刚利用

问题在这里,现在使用javaEE6,web3.0就跑了,但是刚刚使用JavaEE7-web3.1就是不出结果,可以再试试这里。再用6跑一次 7跑一次。而且!!!利用7的环境创建servlet时候,在web.xml

里面description、display-name、servlet-name三者的关系是错位的。所以7是不稳定的。小超利用8.6的结果是一样的。我再试试这些问题。这次用7也跑出来了。。。笑哭。不知道问题在哪里,看来果然除了bug还是重写为王道。但是这个异步的东西不知道放在了哪里。就是不太会更新,所以,如果一旦出了问题,还是要重启。重新部署是不好使了。嗯!对于这个bug重启myeclipse是好使的。但是好像底下也就是控制台貌似不太输出啊。看来得需要一个什么方式把它先印出来,才行。上次关于 那个 内置对象也有bug。监听器,那个部分的。真的是不重启都不刷新。这个的演示就不要再用内置的浏览器了,要改用外面的浏览器。

编码是个问题【待解决】

除了 过去时候的编码问题全部解决,主要指异步传输这个地方。

时间: 2024-10-16 00:21:21

ajax异步传输的相关文章

jquery使用ajax异步传输

前面两篇博文学习了jquery的基本选择器,以及一些基本的案例.在jquery中还为我们提供了一个很方便的用法,那就是ajax请求,简化了传统的使用xmlhttprequest进行ajax请求的写法.这里我以一个简单的用户注册来作为demo. 使用$.get和$.post实现异步请求 index.jsp <%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

ajax异步传输之深入解析

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容.AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量

AJAX异步提交,浏览器总跳出下载界面

问题: 我在写一个网页的“用户登录”部分时,要将用户名和密码传到后端验证,想在前端用了AJAX异步提交功能,将 用户名密码传到后端,然后后端返回验证结果.但AJAX写好后每次刷新网页都会跳出下载窗口,起初以为是 AJAX传输的数据格式出了问题,导致浏览器误以为后台传来的数据是下载内容(这么猜测的),于是 换了xml,txt,jaon 等格式试了个遍,最后还是没解决.后来翻到这篇帖子,才明白: http://www.jb51.net/article/32540.htm,我们先看看我的代码: 下面是

Ajax传递二维数组至后台ThinkPHP控制器

最近为单位做了专家库的小程序,没个专家有擅长的领域,这是通过一个checkbox来提交和编辑的.因为不想刷新页面,使用Ajax异步传输. 首先从专业数据表中读取所有的专业,并且生成checkbox: $(document).ready(function(){ $.ajax({ type:"POST", url:"http://localhost/yibu/index.php/Home/Expertadd/expertecho",//对应控制器读取专业列表 succe

Grails中使用Ajax

grails中很好的集成了Ajax,这里介绍利用Jquery的 getJSON方法进行Ajax异步传输. 使用步骤: 引入Jquery(.gsp 页面中引入 jquery.js) <script type="text/javascript" src="${resource(dir: 'assets/js', file: 'jquery.js')}"></script> Javascript 脚本中添加Ajax调用方法 function isP

Struts2用AJAX实现JSON插件的使用

AJAX的详细描述就不做介绍了,大家基本都懂这个. 下面我们会通过两个具体的案例,来做具体的实现: 案例一: 案例描述:输入用户名,把用户名通过AJAX异步传输的方式发送至后台,判断此用户名是否存在. 第一步,我们需要导入这三个jar包:commons-lang3-3.1.jar.struts2-json-plugin-2.1.8.1.jar.xwork-core-2.1.6.jar,然后还有Struts2的几个基本jar包 第二步,还要导入jQuery的配置文件:jquery-1.8.0.mi

javascript 实现ajax封装

1 纯javascript 封装发送ajax数据 2 post.get方式 发送数据 1 GLOBAL.namespace("Ajax"); 2 /** 3 * 同步ajax 返回json Object 4 * 5 * @param {} 6 * urlStr 7 * @param{} type GET or POST方式 8 * @param {} 9 * paramsStr 与服务器约定 如果为GEt方式 则必须为 key1 = value & key2 = value 1

来谈谈ajax

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 在这里截取了一张网上的图. XMLHttpRequest 是ajax的基础,所以要先创建这个对象. XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: xmlhttp.open("GET","test1.txt"

动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱

在开发JavaWeb应用时,动态生成能够局部刷新的验证码是一项必须的功能,在这里我们将会详细的讲解如何实现这一功能. 一.涉及技术 该功能需要用到AJAX异步传输技术,这样能保证在点击"看不清,重新获取验证码"按钮时,能够不刷新页面其它内容而局部刷新验证码图片内容. 还需要用到Servlet技术,这里会在Servlet的GET方法中通过Java内置的画图工具绘制一个验证码图片,可以在HTML的<img/>标签中的src属性获取缓存图片资源. 二.各个页面及代码 1.inde