Java Ajax入门

 1 /*获取XmlHttpRequest*/
 2 function getAjax(){
 3     var xmlHttpRequest;
 4     /*如果是chrome，火狐，safari，IE7以上等主流浏览器*/
 5     try{
 6         xmlHttpRequest=new XMLHttpRequest();
 7     }catch (e) {
 8         try{
 9             /*是否是IE6*/
10             xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
11         }catch (e) {
12             try{
13                 /*IE5或者更早版本*/
14                 xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
15             }catch(e){
16                 /*抛出异常提示*/
17                 alert("不存在XmlHttpRequest的浏览器");
18                 throw e;
19             }
20         }
21     }
22     //将对象返回
23     return xmlHttpRequest;
24 }

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     title>使用JavaScript测试AJAXtitle>
 6     
 7     script type="text/javascript" src="js/ajaxjs.js">script>
 8     script>
 9         function getAjaxObject(){
10             /*直接调用脚本*/
11             var ajaxObject=getAjax();
12             alert(ajaxObject);
13         }
14     script>
15 head>
16 body>
17  h3>获取XmlHttpRequesth3>
18  input type="button" onclick="getAjaxObject()" value="点击测试获取ajax对象">input>
19 body>
20 html>

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     title>使用JavaScript测试AJAXtitle>
 6     style type="text/css">
 7         div{
 8             border: 1px solid dimgrey;
 9             width: 350px;
10             height: 50px;
11             margin-top: 10px;
12             text-align: center
13         }
14     style>
15     
16     script type="text/javascript" src="js/ajaxjs.js">script>
17     script>
18         /*获取一个ajax对象*/
19         function getAjaxObject(){
20             /*直接调用脚本*/
21             var ajaxObject=getAjax();
22             alert(ajaxObject);
23         }
24         /*发送请求给服务器*/
25         function sendRequest(){
26             /*1 打开与服务器的连接*/
27             var jsRequest=getAjax();
28             /**
29              * open(method,url,async) method即提交方式，一般为GET和POST,url为提交的地址，async代表是否异步(true)还是同步(false)
30              */
31             jsRequest.open("GET","/day11-servletConfigContext/GetAjaxResponse?username=clyang&password=123",true);
32             /*2 发送请求*/
33             //通知服务器发送的数据是请求参数
34             jsRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
35             jsRequest.send();
36             /*3 注册监听*/
37             jsRequest.onreadystatechange=function () {
38                 //确认readyState和status
39                 if(jsRequest.readyState==4){
40                     if(jsRequest.status==200){
41                         //得到响应参数,将参数显示在div中
42                         var result=jsRequest.responseText;
43                         var mydiv= document.getElementById("mydiv");
44                         mydiv.innerText=result;
45                     }
46                 }
47             }
48         }
49     script>
50 head>
51 body>
52  h3>获取XmlHttpRequesth3>
53  input type="button" onclick="getAjaxObject()" value="点击测试获取ajax对象">input>
54  input type="button" onclick="sendRequest()" value="发送请求给服务器获取返回数据">
55  div id="mydiv">div>
56 body>
57 html>

 1         /*$.ajax*/
 2         function jqueryAjax1(){
 3             $.ajax({
 4                 "url":"/day11-servletConfigContext/GetAjaxResponse",
 5                 "data":{"username":"clyang","password":"123"},
 6                 /*"dataType":"json",*/
 7                 "type":"GET",
 8                 success: function(result){
 9                     $("#mydiv2").text(result+"来自按钮1");
10                 },
11                 error:function (e) {
12                     alert(e);
13                 }
14             });
15         }

1         /*$.get*/
2         function jqueryAjax2(){
3             var url="/day11-servletConfigContext/GetAjaxResponse";
4             var data={"username":"clyang","password":"123"};
5             $.get(url,data,function(result){
6                 $("#mydiv2").text(result+"来自按钮2");
7             });
8         }

1         /*$(selector).load*/
2         function jqueryAjax3(){
3             var url="/day11-servletConfigContext/GetAjaxResponse";
4             var data={"username":"clyang","password":"123"};
5             $("#mydiv2").load(url,data,function(result){
6                 /*默认会自动将服务器返回的结果加载到元素上*/
7                 alert(result);
8             });
9         }