Ajax使用文档

ajax的使用步骤：

1.需要通过JavaScript创建XMLHttpRequest对象  所有发送的ajax请求和接受服务器传回来的参数都要通过XMLHttpRequest对象来操作

function createXmlHttp(){

if(window.XMLHttpRequest){

//针对firefox,mozillar,opera,safari,IE7,IE8

xmlHttp = new XMLHttpRequest();

//针对某些特定版本的mozillar浏览器的bug进行修正

if(xmlHttp.overrideMimeType){

xmlHttp.overrideMimeType("text/xml");

}

}else  if(window.ActiveXObject){

//针对IE6,IE5.5,IE5

try{

xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");

}catch(e){

try{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}catch(e){

alert("不能创建XmlHttpRequest");

}

}

}

}

2.利用已创建的XMLHttpRequest对象发送请求给服务器

请求是：servlet

通过XMLHttpRequest对象的open(first,second,third)方法设置要发送的请求

First是第一个参数指的是url提交的方式为get或者是post

第二个参数Second指的是发送请求的url 一般为servlet的url-pattern或者jsp页面的

第三个参数为请求的方式为同步还是异步 true代表异步请求

3.利用XMLHttpRequest的onreadystatechange监听XMLHttpRequest对象中readystate的状态 当状态发生改变的时候调用回调函数去讲返回的数据写到页面指定的地方  这里的回调函数不能加上();仅仅是回调函数名即可

4.利用XMLHttpRequest中的send()方法发送请求给服务器

  注意：send(null);null代表Firefox和IE都支持 

5.需要注意的地方是：回调函数只有在readystate状态为4代表数据接受成功才去操作

此时XMLHttpRequest里面的status状态为200时代表数据接受无误 其他会出现404或者500的错误 返回的数据全部保存到XMLHttpRequest中的responseText中 最后可以将获取的返回数据写到页面指定的位置 实现局部刷新

Status的状态码及含义：

Http状态码	含义
200	请求成功
202	请求被接收，但处理未完成
404	请求资源未找到
500	内部服务器错误

ReadyState的状态值及含义

readyState值	含义
0	表示XMLHttpRequest对象已建立，但还未初始化，这时尚未调用open方法
1	表示open方法已经调用，但未调用send方法（已创建，未发送）
2	表示send方法已经调用，其他数据未知
3	表示请求已经成功发送，正在接受数据
4	表示数据已经成功接收。

以上是get的提交方式的想法 如果是post的提交方式和get方式的不同之处

1． 传参形式不同 get方式通过url后面加?再加传的参数 而post方式参数通过send(参数)传递

2． Post方式在send()之前要加上一句话xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

其他都一样

注意：url的路径问题 一般是servlet对应的url-pattern或者是jsp页面 以及到底包含不包含参数

Dwr使用说明

1. 将dwr的jar包导入到工程下面 dwr.jar 如果出现LogFactory的错误 则需要导入commons-logging-1.1.1.jar包

2. 在web.xml文件配置dwr的servlet

<servlet>

<servlet-name>dwr-invoker</servlet-name>

<servlet-class>

org.directwebremoting.servlet.DwrServlet

</servlet-class>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

</servlet>

<servlet-mapping>

<servlet-name>dwr-invoker</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

3. 在web.xml同目录下面创建一个dwr.xml文件(webRoot/web-inf)

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">

<dwr>

<allow>

<create creator="new" javascript="first">

<param name="class" value="helloWorld.Service" />

</create>

</allow>

</dwr>

并且要在allow中配置用使用的java类(指的是普通的类 注意区分单例模式和非单例模式) 以上配置是非单例模式的类

4.启动工程 然后再浏览器中输入工程的路径+dwr 即http://localhost:8080/Ajax326/dwr 以检查dwr配置是否正确

java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory这个异常需要导入一个日志的jar包 引入commons-logging-1.1.1.jar

5.在使用到dwr的页面首先要引入

<script type='text/javascript' src='dwr/util.js'></script>

   <script type='text/javascript' src='dwr/engine.js'></script>

<script type='text/javascript' src='dwr/interface/first.js'></script>

记住前两个是dwr的默认的js文件  第三个的文件名称interface后面的js的名称是在dwr.xml文件配置相应类的JavaScript的对应的值 该文档中的黑的部分是对应的

6.在该页面的JavaScript中可以直接利用first这个对象访问普通的java类中方法 访问格式：first+类中方法名称 在页面中JavaScript中使用的名字也要和dwr.xml文件中配置的JavaScript的属性值一样  该名字和上面的first一致

需要注意的是：java类方法名不能重载

7.在调用有返回值的java类的方法时 不管该方法有多少参数 在页面JavaScript中调用时该方法总要比类中的方法多一个‘参数’ 这个参数是回调函数  

Dwr会自动将类型进行转换

8.在导入dwr中的util.js的页面的JavaScript函数中可以直接使用$(“key”)用来代表document.getElementById(“key”)

9.如果返回值是对象或者数组(数组中的元素也为对象时)，此时需要在dwr.xml文件中配置类的转换

<convert match="com.puckasoft.ajax.po.User" converter="bean"></convert>

其中match指的是转换的类的路径 这样dwr就会自动将该java类转换成js中的对象形式

单例模式的类dwr的使用首先需要导入相应的jar包 导入 bsh.jar以及bsf.jar包

然后再dwr.xml文件中配置如下信息：需要改变的是JavaScript的属性值和import以及return的内容

注意：return的内容必须是该类的名称加上返回实例的方法getInstance();

<create creator="script" javascript="chinaCitySingletonDao">

    <param name="language" value="beanshell"/>

    <param name="script">

      import com.puckasoft.dao.ChinaCitySingletonDao;

      return ChinaCitySingletonDao.getInstance();

    </param>

</create>

使用dwr时注意：第一点： 配置的是单例模式还是非单例模式

第二点：用到对象转换时一定要记得将对象在dwr.xml文件进行转换

<!--EndFragment-->