Ajax异步请求

本文介绍: Aja x是一个异步请求,可以不用刷新整个页面，就可以达到局部更新的效果。百度的搜索也用到了ajax 这个技术，当我们每次输入一个关键字的时候，搜索栏下面也会跟着改变，但是这个改变并不会刷新整个页面。想必大家也很好奇什么是异步请求，什么是同步请求，那么接下来就有我来进行揭秘吧。

Aja x是一个异步请求,可以不用刷新整个页面，就可以达到局部更新的效果。
百度的搜索也用到了ajax 这个技术，当我们每次输入一个关键字的时候，搜索栏下面也会跟着改变，但是这个改变并不会刷新整个页面。
在这里插入图片描述
想必大家也很好奇什么是异步请求，什么是同步请求，那么接下来就有我来进行揭秘吧。

异步请求与同步 请求

同步请求是客户端向服务器发送了一个请求，客户端要等待，等到客户端接收到响应，才能继续发送第二条请求。同步请求就类似于银行排队去办理业务，要等到上一个人的业务办完才可以办下一个人的业务。
在这里插入图片描述
异步请求恰恰与同步请求相反，客户端向服务端发送一个请求，不需要等待上一个请求接收到请求，可以直接发送本次请求，对于客户端来说是不需要等待的。

Aja x可以实现异步的请求原因是因为客户端与服务器之间存在一个异步引擎，异步引擎里面存在一个请求队列这个请求队列可以排队式的对服务器发起请求，服务器响应给这个异步引擎,这个异步引擎再响应给客户端。这个异步引擎就是XMLHt t pReques t 对象。

原生的Ajax

原生的ajax最重要的是 XMLHt t pReques t 对象,一般作为了解,因为有很多框架已经在原生的Ajax上对ajax进行封装,使其使用更为简便。


//第一步  先城建一个ajax的核心 XMLHttpRequest
let xhr = new XMLHttpRequerst();
//第二步  使用open 创建请求 第一个参数是请求方式 第二个是请求的地址  第三个是同步或者异步
xhr.open('GET',"https://www.baidu.com",false)
//如果是post请求  必须要写请求头
xhr.setRequestHeader('') //设置请求头
//第三步  为xhr.onreadystatechange  设置监听事件
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4) {
    if(xhr.status == 200){
    alert(xhr.responseTwxt)
//readyState  0 请求未初始化  刚刚实例化XMLHttpRequest
//readyState  1 客户端与服务器建立链接  调用open方法
//readyState  2 请求已经被接收
//readyState  3 请求正在处理中
//readyState  4 请求成功
            }
       }
}
// 第四步 发送请求数据  调用send 发送请求 如果不需要参数就写一个null
xhr.send(null)

JQue ry 的Ajax

JQue ry 的Ajax有以下方法
在这里插入图片描述

$.ajax()

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

settings 参数:

data : Str in g /Object: 请求参数,客户端发送给服务器的数据

dataType: Str i n g 服务器响应的数据类型

“xml”: 返回 XML 文档，可用 jQue ry 处理。

“html”: 返回纯文本 HTML 信息；包含的script 标签会在插入 dom时执行。

“script”: 返回纯文本 JavaScri pt 代码。不会自动缓存结果。除非设置了”cache“参数。‘’‘注意：’”在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script 标签来加载)

“json”: 返回 JSON 数据。

“jsonp”: [JSONP]格式解决跨域

“text”: 返回纯文本字符串

success(data, textStatus, jqXHR) function 成功之后的回调函数:

data: 参数名: 接收服务器给ajax请求的响应的数据 , 任意取

error: function, 服务器响应的失败的回调函数

type: Str i n g 提交方式 (默认: “GET”) 请求方式 (“POST” 或 “GET”)，

url: Str i ng 请求的url 地址

            $.ajax({
                url:"/Userinfo/queryPageByajax",
                dataType:"json",
                type:"get",
                success:function (rs) {
                //响应成功的回调函数，rs是接收的结果
                }

            })

$.get(url, [data], [callback], [type])，post(url, [data], [callback], [type])

get与post 方法的ajax是对ajax()的再封装他们分别用来发送get请求与post请求的

参数
url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.get("test.php", function(data){
          alert("Data Loaded: " + data);
});

$.getJSON(url,[data],[fn])

这个方法是用来获取 json 格式的请求参数

请求参数：
url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数

例子：从 Fli c k r JSONP API 载入 4 张最新的关于猫的图片。

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&amp;tagmode=any&amp;format
=json&amp;jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  });
});