ajax servlet怎么接收_使用Ajax技术

aaed0b1d6ea4ed1cb935f1a0e37f31c2.png

问题:
目前浏览器向服务器发起请求的方式有 : form 标签,超链接,还有脚本语言(jsjquery)中的window.location.href方式和表单提交函数。
但是不管哪种提交方式,浏览器都会将接收到的响应内容覆盖在请求网页中显示,但是怎么在保留请求网页内容的基础显示新的内容呢?
解决:
使用Ajax技术,( ╯□╰ )没错就是LOL的武器大师,开打开打....
换句话说,之前我们直接访问servlet、访问JSP也好,都是实现的同步效果,也就是页面跳转的时候是整个页面都刷新了,比如说下面的例子:我们给一个按钮绑定事件

2a65bf7ce755407fd8965388eb93f75e.png

事件触发的时候去访问我们的一个servlet路径

a21f79fe8643bfd757ff9180b75794da.png

57687d5350601d7072c3df3f96430e8b.png

效果:

e2e9f2ff8350324310ee10e613ddbf04.png

一点按钮,页面跳转

17e52d4ce190c514ff4912dad2893110.png

我们可以看到,整个页面内容都换了,虽然能跳转,但这不是我们想要的结果,我们想要的结果是服务器响应的内容只在下面的那个正方形框里显示,其他的内容不变.....

a253d658cc67a366ebdf25510e6fe42f.png

“没想到吧,我又回来了....”,是的,使用Ajax技术,这是异步,刚才我们前面的那个整个页面都跳转的是同步,异步就是各干各的,同步就是同时进行,神同步有没有

b082933307ecb04ee06942df7ec447a5.png

da51d43caa06195c9670d949921e180e.png

效果:

067c371edcc432f9e20edca9f62457b8.png

使用Ajax的流程:
1、创建Ajax引擎对象,这里由于浏览器的不同,也有不一样的地方,我们需要注意
2、声明事件监听,监听Ajax对象的的属性readystate的值,一旦readystate的值发生改变,就触发声明的函数执行。(这个声明事件监听也可以写在后面的步骤,因为是js的函数,我们知道函数是需要调用的,也就是说监听到事件就会调用这个函数)
3、创建请求
4、发送请求
注意:Ajax状态码readyState的值如下:
0:表示ajax引擎对象创建

986f53c792857e4ba5e143d7799f61fb.png

1:表示请求创建但是未发送:

6770fe670c2aac698741771d74b26d7f.png

2:请求发送:

7c11124aeebb6f3f4c6d733e773f85f0.png

3:请求处理完毕,正在接收从服务器响应的内容4:响应内容接收完毕(重要状态)
我们可以测试一下,弹出readystate的值

6af696da9a0dc71fc4af9db1dd73022f.png

e6c74fc95d6290631317c6a6f9fc4e6d.png

185e98285d209ec05c33f3a14485ea98.png

5d0837d3231fdaa3a3c6ff4f2ad01a45.png

一共有4次.....为什么没有0呢?因为0是创建Ajax对象的时候的readyState状态,弹出状态是创建Ajax对象的监听器监听不了的,因为创建对象在前关于Ajax的其他一些问题:
创建并发送ajax请求
创建ajax请求(设置异步或者同步)
ajax.open(method,url,ansyc); method:表示请求方式 get方式:请求数据以?隔开的形式拼接在url的后面请求数据不能写在send方法中 post方式:post方式需要单独的进行请求数据的设置。使用ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
设置请求数据为键值对数据。如果有请求数据则ajax.send("键值对数据&键值对数据..."),如果没有请求数据,则ajax.send(null) url:表示请求地址 ansyc:设置异步或者同步请求,true表示异步,false,表示同步。默认是异步的。异步:
当前js函数继续执行,无须等待ajax请求的响应以及响应的处理。同步:
当前js函数会等待ajax请求以及响应,当ajax响应处理完毕后,继续执行函数的剩余代码。发送ajax请求//get方式
ajax.send(null); //post方式
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("uname=张三&pwd=123");Ajax之服务器响应数据 服务器响应给浏览器的数据应该是字符串类型 但是如果数据量比较大,我们就需要在服务器端将数据拼接成一个良好格式的字符串数据,响应给浏览器。
浏览器根据格式进行数据的解析和使用。
问题:什么样的格式算是良好的格式呢?
解决:使用json格式的字符串
json的概念:其实json就是js创建对象的一种格式。保证对象中数据的紧密性 和完整性。json的格式: var 对象名={ 键名:值, 键名:值, ... 键名:值 }json的例子:

5b25987ed872f7db55cf2d030cca798e.png

使用:
在服务器端将要响应的数据拼接成json格式的字符串,这样客户端(浏览器端)在接收到响应数据后
可以使用eval方法将json格式的字符串数据直接转换为对应的js对象,便于数据的操作。
我们可以在服务器端使用类似Gson的工具包完成json格式字符串的拼接。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值