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的状态码及含义：

ReadyState的状态值及含义

以上是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文件进行转换