js ajax调用java接口 js怎么使用ajax

　　AJAX全称为“Asynchronous javascript and XML”（异步javascript和XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　为什么要使用AJAX？ AJAX的优势？

1. AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
2. 使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
3. AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
4. AJAX 可使因特网应用程序更小、更快，更友好。
5. AJAX 是一种独立于 Web 服务器软件的浏览器技术。　AJAX 基于下列 Web 标准：JavaScript、XML、HTML、CSS在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。
6. Web 应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。
7. 不过，因特网应用程序并不像传统的桌面应用程序那样完善且友好。通过 AJAX，因特网应用程序可以变得更完善，更友好。

Ajax在JavaScript中的使用。

　　1. Get方式实现：

1 <script type="text/javascript">
 2     var xmlHttpRequest;
 3     //创建XHR对象
 4     function createXmlHttpRequest() {
 5         // if(typefo(XMLHttpRequest)!='undifine')
 6         if (window.ActiveXObject) { //如果是IE浏览器    
 7             return new ActiveXObject("Microsoft.XMLHTTP");
 8         } else if (window.XMLHttpRequest) { //非IE浏览器    
 9             return new XMLHttpRequest();
10         }
11     }
12 
13     //Ajax调用的方法
14     function AjaxClick() {
15         var url = "这里是你想要请求的URL，其中包括你的参数(?key1=value1&key2=value2)";
16         //1.创建XMLHttpRequest组建    
17         xmlHttpRequest = createXmlHttpRequest();
18         //2.设置回调函数
19         xmlHttpRequest.onreadystatechange = ajaxCallBack;
20         //onreadystatechange。存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
21         //3.初始化XMLHttpRequest组建    
22         xmlHttpRequest.open("GET", url, true);
23 
24         //open(method,url,async),规定请求的类型、URL 以及是否异步处理请求。
25         //method：请求的类型；GET 或 POST
26         //url：文件在服务器上的位置
27         //async：true（异步）或 false（同步）
28 
29         //GET方式请求可以设置浏览器不使用缓存，需加上下面这段
30         //xhr.setRequestHeader("If-Modified-Since", "0");
31 
32         //4.发送请求    
33         xmlHttpRequest.send(null);
34     }
35 
36     //回调函数    
37     function ajaxCallBack() {
38         //readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
39         //0: 请求未初始化
40         //1: 服务器连接已建立
41         //2: 请求已接收
42         //3: 请求处理中
43         //4: 请求已完成，且响应已就绪
44 
45         //status    请求响应状态码
46         //200: "OK"
47         //404: 未找到页面
48         if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
49             //表示请求成功，且正常响应
50 
51             //responseText    获得字符串形式的响应数据。
52             //responseXML    获得 XML 形式的响应数据。
53             var data = xmlHttpRequest.responseText;
54 
55             //你具体的代码操作写在这里，如对请求响应的数据如何处理
56         }
57     }
58 </script>

JavaScript以Get方式实现Ajax

 

　　2. Post方式实现：

1 <script type="text/javascript">
 2     var xmlHttpRequest;
 3     //创建XHR对象
 4     function createXmlHttpRequest() {
 5         if (window.ActiveXObject) { //如果是IE浏览器    
 6             return new ActiveXObject("Microsoft.XMLHTTP");
 7         } else if (window.XMLHttpRequest) { //非IE浏览器    
 8             return new XMLHttpRequest();
 9         }
10     }
11 
12     //Ajax调用的方法
13     function AjaxClick() {
14         var url = "这里是你想要请求的URL，不包括参数";
15         //1.创建XMLHttpRequest组建    
16         xmlHttpRequest = createXmlHttpRequest();
17         //2.设置回调函数
18         xmlHttpRequest.onreadystatechange = ajaxCallBack;
19         //3.初始化XMLHttpRequest组建    
20         xmlHttpRequest.open("POST", url, true);
21         //4.添加请求头：
22         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
23         //5.发送请求，send("这里是你的请求参数")
24         xmlHttpRequest.send("key1=value1&key2=value2");
25     }
26 
27     //回调函数    
28     function ajaxCallBack() {
29         if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
30             var data = xmlHttpRequest.responseText;
31 
32             //你具体的代码操作写在这里，如对请求响应的数据如何处理
33         }
34     }
35 </script>

JavaScript以Post方式实现Ajax

 

　　如有不足，还希望大牛们指教。谢谢。