AJAX学习

最新推荐文章于 2022-11-30 19:39:58 发布

一个有素质的屌人

最新推荐文章于 2022-11-30 19:39:58 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/weixin_42370899/article/details/103147514

版权

AJAX学习

Ajax

asynchronous javascript and xml:异步的js和xml
他能使用js访问服务器，而且是异步访问。
服务器给客户端的响应一般是整个页面，一个html完整页面。但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面，而只是数据。

数据交互方式：

-text：纯文本
-xml
-json：是js提供的一种数据交互格式

异步交互和同步交互

同步：
-发送一个请求，就要等待服务器的响应结束，然后才能发第二个请求。
-刷新的是整个页面。
异步：
-发一个请求后，无需等待服务器的响应，然后就可以发送第二个请求。
-可以使用js接收服务器的响应，然后使用js来局部刷新。

Ajax的优缺点

-优点：
异步交互，增强了用户的体验
性能，因为服务器无需再响应整个页面，只需要响应部分内容，所以服务器的压力减轻了。
-缺点：
Ajax不能应用在所有场景
Ajax无端的增多了对服务器的访问次数，给服务器带来了压力。

Ajax发送异步请求（四步操作）

第一步（得到XMLHttpRequest）：

1.得到XMLHttpRequest
-大部分浏览器都支持：var xmlHttp = new XMLHttpRequest();
-IE6.0:var xmlHttp = new ActiceXObject(“Msxml2.XMLHTTP”);
IE5.5以及更早版本：var xmlHttp = new ActivexObject(“Microsoft.XMLHTTP”);

第二步（打开与服务器的连接）：

xmlHttp.open();用来打开与服务器的连接，需要三个参数
-请求方式：可以是get或post
请求的url：指定服务器端资源，例如：/demo/AServlet
请求是否为异步：如果为true表示发送异步请求，否则同步请求。
xmlHttp.open(“GET”,"/demo/AServlet",true);

第三部（发送请求）：

xmlHttp.send(null); // 如果不给null参数会造成部分浏览器无法发送
参数：就是请求体内容。如果是get请求，必须给出null。

第四步：

在xmlHttp对象的一个事件上注册监听器：onreadystatechange
-xmlHttp对象一共有5个状态：
0状态：刚创建，还没有调用open方法
1状态：请求开始，调用了open方法，但还没有调用send方法。
2状态：调用完了send方法了
3状态：服务器已经开始响应了，但不表示响应结束了
4状态：服务器响应结束。
-得到xmlHttp对象的状态
var state = xmlHttp.readyState; // 可能是0，1，2，3，4
-得到服务器响应的状态码
var status = xmlHttp.status; // 例如 200,404,500
-得到服务器响应的内容
var content = xmlHttp.responseText; // 得到服务器响应的文本格式的内容
var content = xmlHttp.responseXML; // 得到服务器的响应的xml格式的内容

XMLHttpRequest对象

XMLHttpRequest是Ajax的基础。
创建XMLHttpRequest对象的语法：
var xmlhttp = new XMLHttpRequest();
IE5,IE5语法：
var xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);

实例

var xmlhttp;
if(window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
}
else{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

使用XMLHttpRequest对象的open()方法和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更稳定更可靠。

GET请求

xmlhttp.open(“GET”,"/try/ajax/demo_get.php",true);
xmlhttp.send();
可能得到的是缓存的结果。为了避免这种情况，可以向url添加一个唯一的id
xmlhttp.open(“GET”,"/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
如果需要通过GET方法发送信息，可以向url添加信息
xmlhttp.open(“GET”,"/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

POST请求

xmlhttp.open(“POST”,"/try/ajax/demo_post.php",true);
xmlhttp.send();
如果要POST数据，需要使用setRequestHeader()来添加HTTP头。然后在send方法中给定发送的数据
xmlhttp.open(“POST”,"/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Henry&lname=Ford”);

-setRequestHeader(header,value)
向请求添加HTTP头
header 规定头的名称
value 规定头的值

url - 服务器上的文件

open()方法的url参数是服务器上文件的地址
该文件可以是任何类型的文件。

异步 - true 或 false

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true

服务器响应

获得来自服务器的响应，使用XMLHttpRequest对象的responseText或responseXMl属性。
responseText：获得字符串形式的响应数据
responseXMl：获得xml形式的响应数据

onreadystatechange事件

当请求被发送到服务器时，需要执行一些基于响应的任务。
每当readyState改变时，就会触发onreadystatechange事件。。
readyState属性存有XMLHttpRequest的状态信息。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status的状态：
200: “OK”
404: 未找到页面

jQuery对ajax异步操作的封装

常用方式：$ .ajax,$ .post,$ .get,$ .getJSON

$.ajax

这是jQuery对ajax最基础的封装，可以实现异步通讯的所有功能
参数：
method // 数据的提交方式：get,post
url // 数据的提交路径
async // 是否支持异步刷新，默认是true
data // 需要提交的数据
dataType // 服务器返回数据的类型
success // 请求成功后的回调函数
error // 请求失败后的回调函数
实例:

$.ajax({
    type:"post",
    url:"/xxx/xxx",
    data:{
        "id" : "admin"
    }, // 数据，这里使用的是json格式进行传输
    success: function(res) {
        // 请求成功后的回调函数
    },
    error: function() {
        // 请求失败后的回调函数
    }
});

$.post

这是对$ .ajax进行了更进一步的封装。$.post简化了数据的提交方式，只能使用post方式提交数据。
只能是异步访问服务器，不能同步访问，不能进行错误处理。
参数：
url 发送地址
data 待发送的key/value参数
callback 发送成功是回调函数
type 返回内容格式：xml,html,script,json,text,default
语法格式
$.post( url [, data ] [, success ] [, dataType ] )