ajax基础知识01

13年前

一、我们应该如何理解struts1.x整个框架是怎么弄得?

1、首先是前端控制器ActionServlet
2、配置对象---解析配置文件
   3、Action
4、ActionForm

这4个之间是怎么协同工作的
1、首先在应用程序启动的时候，最先实例化是AS（启动加载）
   （1）配置对象实例化；具体就是将配置文件导入到配置对象里面（加载到内存中）（SAX,DOM，digest都可以）
   从此以后看这个配置文件怎么写的，直接看配置对象就行了。
   配置对象包含ActionForward，ActionMapping，ActionMappings，FormBean，FormBeans，StrutsConfig，MessageResources
   （2）AS就等着接收请求，请求来之后，AS解析请求，并根据请求前面的字符串比较配置文件里面的信息
  与哪一个action对应，看看配置文件里面的信息有没有与某一个form关联。如果有的话就做一个form对象，
  并把用户提交的表单信息填充到form中，并把该信息放到request或者session.
  ***只要看配置文件的信息
2、调用action的执行方法，会有一个String返回值。会通过字符串再通过配置文件再找到一个地址；或者进行重定向
  或者进行转发。

二、复习JSP的重点

jsp里面的很多内容都不用了
常用的
  <%%>
  <%=%>
  <%@page import=""%>
  <%@page pageEncoding=""%>
  <%@include file=""%>
  <%@taglib uri="" prefix=""%>
常用内建对象
pageContext     功能：1setAttribute 2getAttribute 3获得其他内建对象
request
response
session
application
out输出页面

EL表达式

${1+2}
${pageScope.msg}
${requestScope.msg}
${sessionScope.msg}
${applicationScope.msg}

${sessionScope.user.name}
${sessionScope.user.salary gt 10000}

JSTL
<c:if test="">
</c:if>

<c:choose>
  <c:when test="${}">
  </c:when
  <c:otherwise test="">
  </c:otherwise>
</c:choose>

<c:forEach items="${...}" var="">

</c:forEach>

无body的TagLib

三、javascripts
写在jsp里面的javascripts是原封不动地送到客户端的浏览器来使用，但还要与服务器进行一个连接
这是web编程里面的关键技术

javascripts是重点
要尽量的往里钻

1、JavaScript 操作HTML 必须很熟练
2、JavaScript访问服务器Ajax,必须会的技术
3、JavaScript面向对象的一些知识
4、JavaScript框架

function f(a,b){

}

在js中，function本身就是一个对象。
在这个对象中有一个arguments参数属性（数组）
alert(argument.length)
argument数组，有多个元素构成
.length属性返回长度
页面中JS
<script type="text/javascript">
function f(){
//f();可以不传递参数也可以传递参数；如果方法设计了参数：只是为了给参数起一个别名
//比如f（a，b）的意思是argument[0]别名为a，argument[1]别名为b
//与JAV语言中的方法是不同的。java中方法是用来传递参数的
alert(argument.length);
var sum=0;
for (i=0;i<arguments.length;i++){
sum+=arguments[i];
//window.open表示浏览器的内建对象
//window.setInterval(function(){
// alert("hahahha");//方法是用来每秒钟执行个操作
//},1000);

}

}
</script>

以前我们打开浏览器，输入相应地址，浏览器会与服务器进行通信。
现在呢，我们是希望我们开发的js脚本能直接与服务器进行通信。
js发请求，并拿到服务器的响应，并来处理这个结果。

比如在提交表单时，可以不用更新整个页面，而只是刷新部分小的部件
主要是为了能考虑性能
常用场景：
登录页面
注册页面：验证码等的问题；保证用户名唯一性和验证码符合性
不是通过浏览器来发送请求而是由js来发送请求，服务器给出对应的响应
我们可以通过JS来控制验证码不对的话就不能去提交，这样的话：用户体验好；性能好
比如
鼠标一离开用户名文本框，就提示用户名已经使用请更换其他用户名
鼠标一离开电子邮件框体，则提示格式不对等

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>1</title>

  <script type="text/javascript">
   function f(){
    //此函数没有形参,有无形参都可以,有也仅是说明传过来的参数有个别名而已
    var sum=0;
    //定义变量用js
    alert(arguments.length);
    //arguments是一个数组；length属性代表数组的元素个数
    // for (i=0;i<arguments.length;i++){
     // sum+=arguments[i];
     // alert(sum);
    // }
    // alert(sum);
    var taskid=window.setInterval(function(){
     //windows代表浏览器；
     //每隔100000秒执行一次这个函数
     alert("hahahhahaha")},100000);
    window.setTimeout(function(){},20000);
    //多长时间之后执行function()
    window.clearInterval(taskid);
    //通过这句可以将taskid的定时函数关闭

    //
   }


   function d(){
    var taskid1=window.setInterval(function(){
     alert("hehehehehe")},1000);

    window.setTimeout(function(){
     window.clearInterval(taskid1);
    },10000)

    //function d()以上代码的意思是，每秒执行一次代码，执行10次后结束程序

   }

四、XMLHttpRequest
    function testAjax(){

    var xmlHttpRequest = null;

    //初始化xmlHttpRequest对象
    //不同的浏览器初始化的方式不一样
    //js里面只有对象没有类
                if ((typeof XMLHttpRequest) != 'undefined') {
     // FF(ie的最新版本已经支持以下方式)
                    xmlHttpRequest = new XMLHttpRequest();
                }
                else {
     // IE
                    xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
                }

                //创建和服务器的连接
                //arg0: get或post方式
                //arg1: 要连接的地址
                //arg2: 是否是异步的方式连接

                var userValue = document.getElementById('user').value;
                var url = 'some?user='+userValue;
                //地址
                xmlHttpRequest.open('GET', url, true);
                //参数的意思:get请求还是post请求；url地址；true采用的是异步方式；


                // 给onreadystatechange属性赋值了一个函数
                // 注册了一个‘状态监听器’，当xmlHttpRequest的状态
                // 一改变，该函数就调用
                xmlHttpRequest.onreadystatechange = function(){
                    //xmlHttpRequest.readyState属性表示当前的状态码
                    if (xmlHttpRequest.readyState == 4) {
                        //responseText返回文本方式的响应内容
                        var respTxt = xmlHttpRequest.responseText;
                        var d1 = document.getElementById('msg');
                        d1.innerHTML = respTxt;

                    }else {
                       var d1 = document.getElementById('msg');
                          d1.innerHTML = 'loading...';
                    }

                };

                //向服务器发出请求！！！
                // xmlHttpRequest在和服务器交互的过程中
                // 经历5个状态
                // 0 连接还没有建立
                // 1 连接已经建立，但是还没有发请求
                // 2 请求已经发送
                // 3 正在和服务器正交互
                // 4 响应结束

                // 每当状态发生改变的时候，就会调用
                //onreadystatechange所指定的函数
                //也就是会调用4次这个函数
                xmlHttpRequest.send(null);
                //发出请求
                //如果是get请求，这里就是null；如果是post请求，这里就是http提交的表单数据

            }



  </script>
  <meta name="author" content="songxl" />
  
</head>
<body>

  <input type="button" onclick="f(1,2,3);" value="click me"/>

</body>
</html>

tomcat配置文件的含义
tomcat ---conf----web.xml文件

请求是发给servlet不是发给jsp

在js里面，任何html元素都被当作对象
document.getElementById("")
d1.innerHTML

<input type="text" id="user" name="user" value="" onblur=""/>
解释：id是了ajax使用的id
   name是提交表单的别名
   两者最好一样
   可以减少接收请求的servlet的代码减少

servlet
SomeServlet.java web.xml其路径为/some

package org.whatisjava.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SomeServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html");
  String user=request.getParameter("user");
  if ("whatisjava".equals(user)){
   System.out.println("ok");
  }else{
   System.out.println("Error");
  }


  response.setContentType("text/html");
  PrintWriter out = response.getWriter();
  out.write("<html><body>hello</body></html>");
}

}

五、json技术
使用ajax的场景，不要乱用：只刷新页面的很小的局部数据时
在网络上传输数据一般情况为txt，如果只是字符串的话，相当容易
如果返回的是多个字符串，可能还有排序等时，最好是返回的xml格式的文件（结构化的文本）
<list>
<item>Java....</item>
<item>Java....</item>
<item></item>
</list>

怎么把这个xml文件解析成可识别的项呢？

xml结构化文件可以表达任何数据

js---->访问服务器---->返回xml---->js需要解析xml文件
这样的话对js的要求就太高了。
----
从而JSON出现，大量用JSON
JSON也是一种简单的文本,在ajax场合中，json中应用比xml要多

  AJAX
  AJAS


JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用
完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。
这些特性使JSON成为理想的数据交换语言。

JSON建构于两种结构：

“名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），
结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组（associative array）。
值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。
这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构
的编程语言之间交换成为可能

</script>

通过js为表格添加一行

function addRow(obj,className){
var tb=$('tb');

var row=tb.insertRow(tb.rows.length);//表格插入一行，从哪里开始插入，返回值是刚刚插入tr对象
var id=row.insertCell(row.cells.length);//在tr里面插入单元格，返回值是刚刚插入td的对象
var name=row.insertCell(row.cells.length);
var sex=row.insertCell(row.cells.length);
var age=row.insertCell(row.cells.length);
id.innerHTML=obj.id;

}

js_object.jsp

<%@page pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript" src="js/prototype-1.6.0.3.js">

  //导入js代码
  //必须是一个专门的script
  </script>
  <script type="text/javascript">
   //var point = {x:100,y:200};//这个对象只有属性没有方法，是一种特殊的语法格式；
   //alert(point.x + point.y);

   //var someObj = {v1:100,v2:{x:100,y:200}};//这个对象包含一个属性v1还有一个对象v2
   //alert(someObj.v2.x);//可以通过这种方式来访问其子对象


   //var str = "{'x':100,'y':200}";//如果js传给服务器是这样的字符串的话，就可以解释成js对象
   //JSON字符串


   //var obj = str.evalJSON();//通过evalJSON可以把字符串转换成对象；但是字符串必须按照设定的格式写
   //alert(obj.x);
    //prototype,js文件里面的方法
    //添加这个组件后，str里面增加了evaJSON方法；这种扩展方式在java中是不可能的；但在js中是可能的

   //用一个json框架：prototype原型（定义了好多函数）


   function testJSON() {
    var listStr = "[{'id':100,name:'java'},{'id':200, name:'php'}]";
    //以上是数组，有2个元素；
    //最外层如果是[]的话，表示是一个数组
    //如果是{}，表示是一个对象

    var empList = listStr.evalJSON();
    //prototype,js文件里面的方法
    //添加这个组件后，str里面增加了evaJSON方法；这种扩展方式在java中是不可能的；但在js中是可能的


    clearTb($('tb'));//清空表格，调用方法

    for(i=0;i<empList.length;i++) {
     //document.getElementById('tb');//通过表格的id（‘tb’）获取表格对象
     var tb = $('tb');//与上行代码等价

     var tr = tb.insertRow(tb.rows.length);

     var td1 = tr.insertCell(tr.cells.length);
     var td2 = tr.insertCell(tr.cells.length);

     td1.innerHTML = empList[i].id;
     td2.innerHTML = empList[i].name;
    }
   }
   //清空表格的方法
   //可变对象必须采用这样的方法来做
   function clearTb(tb) {
    for(i=tb.rows.length-1; i>=1; i--) {
     tb.deleteRow(i);
    }
   }
  </script>


</head>

org.whatisjava.servlet
org.whatisjava.domain
org.whatisjava.test

struts1：对ajax的支持
     由于struts1主要是通过action来进行对页面的转发和重定向的
     而ajax是通过js请求发送给服务器的。
    比如validate.action请求到ActionServlet之后，经过Action的处理在这里返回的是null而非success和fail
    如果返回null的话，则不将其进行转发或者重定向了，可以在action用其他代码来完成工作
    由于action里面包含request和response；也没有必要往request里面去存放数据

ajax基础知识01

博客分类

目录

推荐阅读

ajax基础知识01

ajax+struts基础知识02

hibernate基础知识

Java 基础知识