如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);//打开文件
xmlhttp.send();// 发送数据
open(method,url,async)：
规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
send(string)
View Code
View Code
将请求发送到服务器。
string：仅用于 POST 请求；
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
语法AJAX方法：
$.ajax({name:value, name:value, ... })
1 <!DOCTYPE html> 2 <htmllang="en"> 3 <head> 4 <metacharset="UTF-8"/> 5 <title>Document</title> 6 </head> 7 <body> 8 姓名：<inputtype="text"name="user"> 9 年龄：<inputtype="text"name="age"> 10 <inputtype="button"value="输入"> 11 <divstyle="border:1px solid red;padding:30px"> 12 <h2>你的信息：</h2> 13 <p>XXX</p> 14 <p>XXX</p> 15 </div> 16 </body> 17 <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 18 <scripttype="text/javascript"> 19 var $btn = $("input[type=button]"); 20 var $input = $("input[type=text]"); 21 var $p = $("p"); 22 $btn.on("click",function(){ 23 $.ajax({ 24 type:"get",// 请求方式； 25 url:"1-jq-ajax-get.php",// 连接服务器数据地址； 26 data:{name:$input.eq(0).val(), age:$input.eq(1).val()},// 传输的数据 27 dataType:"json",//传过来的数据类型 28 success:function(data){ 29 console.log(data);//成功的时候 30 $p.eq(0).text(data.name); 31 $p.eq(1).text(data.age); 32 }, 33 error:function(){ 34 // 传输失败 35 console.log("请求失败！"); 36 } 37 }); 38 }); 39 </script> 40 </html>
使用ajax的get的方法：$.get:
1 <!DOCTYPE html> 2 <htmllang="en"> 3 <head> 4 <metacharset="UTF-8"/> 5 <title>Document</title> 6 </head> 7 <body> 8 姓名：<inputtype="text"name="user"> 9 年龄：<inputtype="text"name="age"> 10 <inputtype="button"value="输入"> 11 <divstyle="border:1px solid red;padding:30px"> 12 <h2>你的信息：</h2> 13 <p>XXX</p> 14 <p>XXX</p> 15 </div> 16 </body> 17 <scripttype="text/javascript"src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 18 <scripttype="text/javascript"> 19 var $btn = $("input[type=button]"); 20 var $input = $("input[type=text]"); 21 var $p = $("p"); 22 $btn.on("click",function(){ 23 // 使用jq的ajax的get方法 24 // $.get("1-jq-ajax-get.php"); 25 $.get("1-jq-ajax-get.php",{ name:$input.eq(0).val(), age:$input.eq(1).val()},function(data){ 26 console.log(data); 27 $p.eq(0).text(data.name); 28 $p.eq(1).text(data.age); 29 },"json"); 30 }); 31 </script> 32 </html>
使用ajax的post的方法：$.post:
$.post(url,[data],[callback],[type]);
$.post("test.php", { name: "John", time: "2pm" },
function(data){
process(data);
}, "xml");