AJAX笔记

最新推荐文章于 2024-02-01 15:40:35 发布

maxtomb

最新推荐文章于 2024-02-01 15:40:35 发布

阅读量410

点赞数

分类专栏： WEB开发笔记文章标签： ajax 服务器 javascript callback xmlhttprequest asynchronous

本文链接：https://blog.youkuaiyun.com/maxtomb/article/details/5465552

版权

WEB开发笔记专栏收录该内容

27 篇文章

订阅专栏

jsp内置对象：
page  --java.lang.Object
request  --javax.servlet.http.HttpServletRequest
session  --javax.servlet.http.HttpSession
application --javax.servlet.ServletContext

response --javax.servlet.http.HttpServletResponse

pageContext --javax.servlet.jsp.PageContext
  getRequest
  getSession
  ...

  findAttribute()
exception --java.lang.Throwable
out  --javax.servlet.jsp.JspWriter
  jsp--->[servlet--->]jsp
config  --javax.servlet.ServletConfig
  web.xml
  <servlet/filter>
   <init-param>

  getInitParameter("name"):String value;

传统web应用程序：
c/s:
  胖客户端：
  瘦客户端：
  缺陷：
   系统更新导致每个客户端都需要更新。
  优点：
   服务器端压力较小

B/S:
  优点：
   系统的任何操作更新和客户端没有任何耦合
  缺陷：
   服务器端压力大
   页面使用javaScript进行客户端的格式化校验
   regist:
    填写注册信息
       |
    提交整个form表单
       |____________服务器获取用户名
           |
      查询数据库验证用户名是否存在
       |   |
     不存在，则添加信息存在，则返回注册页面

   客户端和服务器端的操作不能并行
   服务器端的处理过程中，导致客户端等待

Ajax
异步：并行操作
  各自执行各自的流程，互不影响
同步：串行化操作
  资源之间需要等待对方的执行完成之后，自己才能执行

asynchronous javaScript and xml 异步的javaScript和xml
在传统的web项目中添加了异步通信机制，使客户端和服务器端可以并行操作

使用客户端javaScript事件---触发----》服务器端的处理程序
onblur url-pattern Servlet

ajax编写流程：
1 编写一个客户端页面，页面中的某个控件需要制定一个事件。如
<input type="text" οnblur="invoke()"> 【javaScript】

function invoke(){
  获取本客户端的异步通讯对象【异步通讯对象】
   IE :ActiveXObject
   非IE :XmlHttpRequest

  由异步通信对象，携带参数，发送请求给服务器
  validate.abc?name=mary

动态多次检测异步通信对象的执行结果
callback();

获取异步通信对象携带的服务器端的响应信息

局部更新页面【xml dom解析】
}

function callback(){
检测异步通信对象是否正常找到服务器端的处理类

  检测异步通信对象在服务器端的请求是否正常处理完毕
}
2 处理类Servelt
  获取name参数的值
  访问数据库，验证
  回响一个结果信息给客户端
   out.println()
   【跳转页面】

MVC:
view :负责构建页面显示信息
   接受用户输入的数据
   显示结果给客户
controller:负责接受客户端的所有请求/响应，分发给相应的资源
   静态资源：直接调用页面显示给客户
   动态资源：调用servlet的响应处理方法
    作用：接受数据，封装对象，调用biz方法
biz :负责业务逻辑的处理
   获取对象，进行业务逻辑判断
   如果符合规则，则调用dao的方法持久化
   如果不符合，返回处理结果给servlet
model :负责模型
   业务模型: DAO
   实体模型：实体类/javaBean

框架：
针对一类问题所设计出的，包含了各种设计模式的通用解决方案

1 框架的核心思想，解决的问题
2 框架的基本搭建流程
DWR：
Direct web remoting 直接web远程调用

javaScript---->servlet---->DAO---DB
本质：客户端使用javaScript调用服务器端的java程序

1 *servlet的功能：
  获取前台页面中传递的参数【参数名改变】
  调用后台处理程序
2 *获取异步通信对象
   *获取需要发送给服务器的参数【参数名改变】
   *建立和服务器的链接       【请求路径改变，参数名改变】
   *发送请求
   *检测异步通信对象的执行状态
  *正常抵达服务器，找到资源
  *资源正常处理完毕
  *获取异步通信对象携带的服务器端响应信息
  *局部更新页面信息【更新的内容改变】

DWR的编写流程：
1 配置DWR的核心处理servlet
<servlet>
  <servlet-name>dwr</servlet-name>
  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>dwr</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
2 编写服务器端处理类
public class Greeting {
  public String greet(String name){
   return "Hello~!"+name;
  }
}
3 编写客户端页面
<head><script type="text/javascript" src="dwr/engine.js"></script>
  <script type="text/javascript" src="dwr/util.js"></script>
  <script type="text/javascript" src="dwr/interface/greeting.js"></script>
  <script type="text/javascript" src="hello.js"></script></head>
<body><input type="text" name="uname" οnblur="sayHello()"/>
  <span id="result"></span></body>
4 编写dwr.xml核心配置文件
<dwr>
  <allow>
   <create creator="new" javascript="greeting">
    <param name="class" value="com.Hello">
   </create>
  </allow>
</dwr>
5 编写hello.js
function sayHello(){
  var un = document.getElementsByName("uname")[0].value;
  greeting.greet(un,callback);
}
function callback(msg){
  DWRUtil.setValue("result",msg);
}