一、原生js写ajax请求
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>json实例</title> 6 </head> 7 <body> 8 <input id="btn" value="json" type="button"> 9 <script type="text/javascript">10 ????window.onload = function(){11 ????????var btn = document.getElementById(‘btn‘);12 ????????btn.onclick = function(){13 ????????????var xhr = null;14 ????????????if(window.XMLHttpRequest){15 ????????????????xhr = new XMLHttpRequest();16 ????????????}else{17 ????????????????xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);18 ????????????}19 ????????????xhr.open("post","./jsondemo.php",true);20 ????????????xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");21 ????????????xhr.onreadystatechange = function(){22 ????????????????if(xhr.readyState == 4){23 ????????????????????if(xhr.status == 200){24 ????????????????????????var data = xhr.responseText;25 ????????????????????????var obj = JSON.parse(data);26 ????????????????????????var obj1 = eval("("+data+")");27 ????????????????????????console.log(obj.username);28 ????????????????????????console.log(obj.age);29 ????????????????????????console.log(obj1.username);30 ????????????????????????console.log(obj1.age);31 32 ????????????????????}else{33 ????????????????????????console.log(‘failure‘);34 ????????????????????}35 ????????????????}36 ????????????}37 ????????????var param = ‘{"username":"zhangsan","age":"12"}‘;38 ????????????xhr.send("user="+param);39 ????????}40 ????}41 </script>42 </body>43 </html>二、jQuery方式写ajax请求
语法：
1 $.ajax({ 2 ???url: ‘XX.php‘, 3 ???type:‘post,‘ 4 ???data:{username:‘tom‘,password:‘2223‘}, 5 ???success: function (data){ 6 ???????console.log(data); 7 ???}, 8 ???error: function (data){ 9 ???????console.log(error);10 ???}11 })以上除了URL设置外，其他的参数可选
1 <script type="text/javascript"> 2 ????$(function(){ 3 ????????$("#btn").click(function(){ 4 ??????????$.ajax({ 5 ?????????????type : "get", 6 ?????????????url : ‘./05open.php?username=中国&password=123‘, 7 ?????????????success : function(data){ 8 ?????????????????console.log(data); 9 ?????????????}10 ??????????});11 12 ????????});13 ????});14 15 </script>ajax原生写法和jQuery写法
原文地址：http://www.cnblogs.com/GochanTao/p/7609191.html