Aajx

# Ajax入门及基本开发 ##

# Ajax的基本概念
>> 概念；
界面异步传输技术；
将几种技术和在一起进行开发的一种编程方式；

>> 基本应用场景；
> Google Suggest
> Gmail
> Google Map

# Ajax的开发步骤；
>> 创建XMLHttpRequest对象；
>> 将状态触发器绑定到一个函数；
>> 使用open函数建立与服务器的链接；
>> 向服务器端发送数据；
>> 在回调函数中对返回数据进行处理；

# 简单示例；
>> 简单的弹框操作；
// 创建XMLHttpRequest对象；

<script type="text/javascript">

function createXMLHttpRequest()
{
var xmlHttp;

try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{

// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{

try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
}
</script>

// 将状态触发器绑定到一个函数；
var xmlHttp= createXMLHttpRequest();
xmlHttp.onreadystatechange= function(){
// 在回调函数中对返回数据进行处理；
if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

//具体代码；
alert(xmlHttp.responseText);
//在客户端显示结果；
}
}

};
// 使用open函数建立与服务器的链接；
xmlHttp.open("GET","提交的地址，注意跟上应用名",true);

// 向服务器端发送数据；
xmlHttp.send(null);

//POST方式提交数据；
xmlHttp.open("POST","提交的地址，注意跟上应用名",true);

xmlHttp.setRequsetHeader("Content-Type","application/x-www-from-urlencoded");

xmlHttp.send("username=XXX& age=10");

>> 创建一个Servlet
response.setContentType("text/html;charset=UTF-8);
String username= request.getParameter("username");
username= new String(username.getByte("iso-8859-1"),"UTF-8");
syso(username);//服务端返回结果；

//post提交数据的代码；
requset.setCharacterEncoding("UTF-8");
String username= request.getParameter("username");

response.getWriter().write("xxxx");

# Ajax的优化
因为返回数据冗余过多，考虑通过优化格式的方式来进行数据返回；

>> JSON数据格式；
|-- 一种轻量级的数据格式，容易阅读且解析方便；

|-- 基本格式；
> <script>
var student= {"name":"cgx","age":"20"}; //JSON字符串；
alert(students.name+" --- "+students.age);

var students= [ {"name":"cgx","age":"20"}, {"name":"aj","age":"18"}];
alert(students[0].name+" --- "+student[0].age);
//JSON数据格式的数组；

</script>

|-- 使用方式；
> 有个JSON-lib的小型插件
|-- 具体方式；
> JSONArray json= JSONArray.fromObject(Object[] obj);
//对于数组和list集合的转换；

> JASONObject json2= JASONObject.fromObject(Object obj);
//对于单个元素或者Bean 的转换；