一般我们都是使用框架来进行AJAX技术的实现，在早期还没有这些js框架的时候是如何实现ajax的技术的呢？

创建XHR对象的代码如下:

1. var xmlhttp;
2. function XHRsubmit(){
3. var userName = document.getElementById("username").value;
4. //创建XMLHttprequest对象,每个浏览器的这个对象都是不相同的，所以这个是最复杂的一步
5. //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
6. if(window.XMLHttpRequest){
7. //针对FireFox,Mozillar,Opera,Safari,IE7,IE8,IE9
8. xmlhttp = new XMLHttpRequest();
9. //针对某些特定版本的mozillar浏览器的BUG进行修正
10. if(xmlhttp.overrideMimeType){
11. xmlhttp.overrideMimeType("text/xml");
12. //alert(xmlhttp);
13. }
14. }else if(window.ActiveXObject){
15. //针对IE6,IE5.5,IE5通过ActiveXObject创建
16. var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
17. for(var i =0; i<activexName.length; i++){
18. try{
19. //取出一个控件名进行创建，如果创建成功就终止循环
20. //如果创建失败，会抛出异常，然后继续循环，继续尝试创建
21. xmlhttp = new ActiveXObject(activexName[i]);
22. break;
23. }catch(e){
24. }
25. }
26. //queryXMLHttpRequest对象创建成功
27. }
28. if(xmlhttp){
29. alert("XMLHttpRequest对象创建成功");
30. }else{
31. alert("XMLHttpRequest对象创建失败");
32. return ;
33. }
34. //注册回调函数
35. //注册回调函数时，只需要函数名不要加括号
36. xmlhttp.onreadystatechange = callback2;
37. //GET方式请求
38. //xmlhttp.open("GET","TestAction!test2.action",true);
39. //POST方式请求需要自己设置http的请求头
40. xmlhttp.open("POST","TestAction!test2.action",true);
41. xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
42. //4.发送数据，开始和服务端交互
43. //同步下，send这句话会等服务端数据回来后才执行完
44. //异步下，sned这句话会立即执行
45. xmlhttp.send("name="+$("#username").val());
46. //xmlhttp.send(null);
47. }
48. //回调函数
49. function callback2(){
50. //alert(xmlhttp.readyState);
51. //5接收响应数据
52. //判断对象的状态是否交互完成
53. if(xmlhttp.readyState == 4){
54. //判断http的交互是否成功
55. if(xmlhttp.status == 200){
56. //获取服务器端返回的数据
57. //获取服务器端输出的纯文本数据
58. var responseText = xmlhttp.responseText;
59. //将数据显示在页面上
60. //通过dom的方式找到div标签对应的元素节点
61. var divNode = document.getElementById("result");
62. //设置元素节点中的html内容
63. divNode.innerHTML = responseText;
64. }else{
65. alert("出错了");
66. }
67. }else{
68. //alert("出错了1");
69. }
70. }

1. <input id="username" name="username" value="请输入..."></input>
2. <input type="button" onclick="XHRsubmit()" value="使用XHR的post方法提交"/>