Ajax的个人理解

2017-12-13 20:06:06来源:CSDN作者:chenzl0723人点击

分享

1.什么是Ajax? Asynchronous JavaScript and XML( 异步JavaScript和XML )

    一种创建交互式网页应用的网页开发技术基于web标准(standards-based presentation)XHTML CSS的表示使用 DOM(Document Object Model)进行动态显示及交互;使用 XML 和 XSLT 进行数据交换及相关操作;使用 XMLHttpRequest 进行异步数据查询、检索;使用 JavaScript 将所有的东西绑定在一起

2.优势
①通过异步模式,提升了用户体验
②优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
例子:Google Maps!

3.创建ajax程序的基本流程(以验证用户名存在性为例子)

①在中创建XMLHttpRequest对象
②使用XMLHttpRequest对象创建请求request对象
1. var request;
2. if (window.XMLHttpRequest) { // Mozilla,…
3. request = new XMLHttpRequest();
4. }else if (window.ActiveXObject) { // IE
5. request = new ActiveXObject(“Msxml2.XMLHTTP”);
6. }
③监视response的状态,写回调函数处理服务器返回的数据
1. function checkme(){
2. //得到文本框值
3. var name=document.all.stname.value;
4. //把 name发给 servlet 或 jsp 防止缓存 加上一个 r=0.7649321
5. request.open(“get”,”check?stname=” name “&r=” Math.random());
6. request.send(null);
7. }
④使用XMLHttpRequest对象发送请求 使用事件触发

  1. request.onreadystatechange = sendName;
  2. function sendName(){
  3. if(request.readyState==4){ //接收完毕
  4. //数据呢?
  5. var fhz=request.responseText;

    1. if(fhz==”true”){ //用户存在了
  6. document.all.info.innerHTML=”用户名已存在”;
  7. document.all.info.style.color=”red”;
  8. }else{
  9. document.all.info.innerHTML=”用户名可用”;
  10. document.all.info.style.color=”green”;
  11. }
  12. }
  13. }
    4.两个应用——验证用户存在否,动态加下拉列表

    1)注册 zhuce.jsp

  14. <%@ page language=”java” import=”java.util.*” pageEncoding=”gbk”%>
  15. My JSP ‘zhuce.jsp’ starting page

相关文章

    无相关信息

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台