如需将请求发送到服务器，我们使用 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)
将请求发送到服务器。
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");
时间： 2024-10-13 07:15:27