一.get与post的区别：
1.get：
1.>get提交时，将数据显示到url中,安全性较低；
2.>url对于提交的数据大小有限制，一般是几十个汉字，不适合提交大量数据；
2.post：
1.>数据不会显示在url中，安全性较高；
2.>可以发送大量数据，尤其是文件上传必须用post；
二.简介：
1.作用：
在无刷新无提交的情况下，实现页面的局部加载；
2.定义：
AJAX=异步Javascript和XML;
AJAX是一种用于创建快速动态网页的技术；
3.使用AJAX的应用程序案例：
新浪微博，Goole地图，开心网等等；
4.举例：
1-xhr.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">发送ajax请求</button>
<script>
btn.onclick=function(){
alert(111);
// 1.声明一个xhr对象;
var xhr=new XMLHttpRequest();
// 2.监听xhr状态的改变
xhr.onreadystatechange=function(){
console.log(xhr.readyState+'xhr就绪状态');//=4成功
//4个值 1，2，3，4
console.log(xhr.status+'响应状态');//=200
console.log(xhr.responseText+'响应消息主体');
}
//3.打开web服务器的链接
xhr.open('get','1_xhr.php',true);//true代表是否为异步请求
//4.发送请求消息主体（发送数据）
xhr.send(null);
}
</script>
</body>
</html>
1-xhr.php:
<?php
//响应头部
header('Content-Type:text/plain');
for($i=0;$i<=10;$i++){
echo $i.'hello';
}
5.XMLHttpRequest用于在后台与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分内容进行更新；
6.向服务器发送请求，使用XMLHttpRequest对象的open（）和send（）方法；
eg：xhr.open('get','1-xhr.php',true);//open方法中的async参数必须设置为true；
xhr.send（）；
| 序号 | 方法 | 描述 | |
|---|---|---|---|
| 1 | open（method，url，async） | 规定请求的类型，url以及是否异步处理请求 | method：请求的类型：get或post； url：文件在服务器上的位置；async： true（异步）或false（同步）； |
| 2 | send方法 send（string） | 将请求发送到服务器，仅用于post请求 |
7.通过AJAX，Javascript无需等待服务器的响应，而是：
1.>在等待服务器响应时执行其他脚本；
2.>当响应就绪后对响应进行处理；
8.AJAX-服务器响应
若需获得来自服务器的响应，需使用XMLHttpRequest对象的responseText或responseXML；
1.>responseText 获得字符串形式的响应数据；
2.>responseXML 获得xml形式的响应数据；
9.XMLHttpRequest对象的三个重要属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数，每当readystate属性改变时，就会调用该函数； |
| readystate | 存有XMLHttpRequest的状态，从0-4发生变化；0：请求未初始化；1：服务器连接已建立；2：请求已接收；3：请求处理中；4：请求已完成，且响应已就绪； |
| status | 200“OK” 404 未找到页面 |
10.常用header汇总：
header（‘Content-type:text/html;charset=utf8’）;//设置页面内容是html，编码格式是utf-8；
header (‘Content-type:text/plain’);//纯文本格式；
header (‘Content-type:img/jpeg’);//JPG,JPEG;
header (‘Content-type:application/zip’);//zip文件；
header (‘Content-type:application/pdf’);//pdf文件；
header (‘Content-type:audio/mpeg’);//音频文件；
header (‘Content-type:text/css’);//css文件；
header (‘Content-type:text/javascript’);//js文件；
header (‘Content-type:text/xml’);//xml;
header (‘Content-type:application/x-show**e-flash’);//flash动画；
三.使用get方式发送ajax请求：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">发送ajax请求</button>
<script>
btn.onclick=function(){
alert(111);
// 1.声明一个xhr对象;
var xhr=new XMLHttpRequest();
// 2.监听xhr状态的改变
xhr.onreadystatechange=function(){
console.log(xhr.readyState+'xhr就绪状态');//=4成功
//4个值 1，2，3，4
console.log(xhr.status+'响应状态');//=200
console.log(xhr.responseText+'响应消息主体');
}
//3.打开web服务器的链接
xhr.open('get','1_xhr.php',true);//true代表是否为异步请求
//4.发送请求消息主体（发送数据）
xhr.send(null);
}
</script>
</body>
</html>
四.使用post方式发送ajax请求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 1.创建一个xhr对象
var xhr=new XMLHttpRequest();
// 2.监听xhr状态的改变
xhr.onreadystatechange=function(){
}
// 3.打开一个链接
xhr.open('post','jd.php',true);
// 4.修改请求消息头部
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 5.发送数据
xhr.send(null);
</script>
</body>
</html>
网友评论