您现在的位置是:网站首页>博客详情博客详情

AJAX异步请求和JQuery的post,get,getJSON,ajax函数的使用

边小丰2019年01月30日 前端知识 219人已围观


摘要: ajax:是一种与服务器交互的技术,在不刷新全部网页的情况下,更新某些表单项的数据。实现对部分网页的刷新。 常用场景:百度或者谷歌的时候,输入的时候给出具体的提示


前言

ajax:是一种与服务器交互的技术,在不刷新全部网页的情况下,更新某些表单项的数据。实现对部分网页的刷新。
常用场景:百度或者谷歌的时候,输入的时候给出具体的提示。

关于XHR(XMLHttpRequest)

XHR时AJAX的基础,所有的浏览器都支持XMLHTTPRequest对象,老年版本的IE5/6使用的是ActiveXObject。所以一般来说,为了兼容性,还是会做一个判断,判断用户的浏览器支不支持XHR。检测的方法如下:

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

创建XHR:
xhr=new XMLHttpRequest

老年IE:
xhr=new ActiveXObject("Microsoft.XMLHTTP")

XHR请求

如果需要将请求发送到服务器,需要使用到XMLHttpRequest对象的open()和send()方法。

xhr.open(method,url,async);
xhr.send();

 open()

相当于设置参数。

原型如下:
open(method,url,async);
* method: 请求的类型,GET和POST。
注意:使用POST还是GET需要根据具体的情况,下面是一张比对图:

  • url:在服务器上访问的地址
  • async:Boolean,true(异步),false(同步,注意,如果为false,那么在加载数据的时候会直接禁止掉当前窗口,不能再做其他交互)

send()方法

将请求发送到服务器。

当使用的是GET方法的时候,直接使用send()。如果使用的是POST方法,send(String string)。一般string的内容为要发送的数据。

POST和GET请求服务器方式对比:

不带参数:

POST:

xhr.open(“POST”,“/test”,true);
xhr.send();

GET:

xhr.open(“GET’,”/test",true);
xhr.send();

可以看到在不带参数的时候都一样的,区别在于,使用GET可能会导致查询到缓存数据,解决的办法是添加唯一标识,比如当前的时间或者随机数等。

带参数

POST:

xhr.open(“POST”,“/test”,true);
xhr.send(“name=test&age=19”);

GET:

xhr=open("GET","/test?name=test&age=19",true);
xhr=send();

可以看到,这里的区别是使用GET是直接将参数添加到url中,使用POST是直接将参数添加到send()的形参中。

XHR响应

使用XMLHttpRequest对象的responseText或responseXML属性。
* responseText:获取字符串形式的响应数据。
* responseXML:获取XML形式的响应数据。

onreadystatechange事件

当请求被发送到服务器的时候,需要做一个基于响应的任务。
每当readyState改变时,就会触发onreadystatechange事件。

readyState属性存有XMLHTTPRequest的状态信息。


readyState有五个状态(0-4):
* 0:请求未初始化
* 1:服务器连接已建立
* 2:请求接收
* 3:请求处理
* 4:请求处理完成

当readyState == 4的时候,表示后台已经处理完成了request,status == 200,表示返回的结果是OK的。(注:onreadystatechange事件被触发5次,对应着状态0-4)

xhr=function(){
    if(xhr.readyState==4&&xhr.status==200){
        /*执行操作*/
    }

}

Jquery使用AJAX

一般来说,JQuery中有\$.get、\$.post、\$.getJSON以及最原始的ajax()函数等。

get()

写法如下:$(selector).get(url,data,success(response,status,xhr),dataType)

等价于:

$.ajax({  
  url: url,  
  data: data,  
  success: callback,  
  dataType: dataType  
}); 

关于参数含义如下:

参数 是否必须 解释
url 表示请求的url
data 表示连同请求发送到服务器的数据
success(response,status,xhr) 表示当请求成功后运行的函数。respose表示包含来回请求的结果数据。status表示请求的状态,xhr表示XMLHttpRequest对象。
dataType 表示预计的服务器响应的数据类型,默认JQuery会自动判断。

post()

函数原型:¥(selector).post(url,data,success(response,status,xhr),dataType)

等价于:

$.ajax({  
  url: url,  
  data: data,  
  success: callback,  
  dataType: dataType  
}); 

关于参数含义如下:

参数 是否必须 解释
url 表示请求的url
data 表示连同请求发送到服务器的数据
success(response,status,xhr) 表示当请求成功后运行的函数。respose表示包含来回请求的结果数据。status表示请求的状态,xhr表示XMLHttpRequest对象。
dataType 表示预计的服务器响应的数据类型,默认JQuery会自动判断。

getJSON()

函数原型:$(selector).getJSON(url,data,success(data,status,xhr))
等价于:

$.ajax({  
  url: url,  
  data: data,  
  success: callback,  
  dataType: json  
}); 
参数 是否必须 解释
url 表示请求的url
data 表示连同请求发送到服务器的数据
success(response,status,xhr) 表示当请求成功后运行的函数。respose表示包含来回请求的结果数据。status表示请求的状态,xhr表示XMLHttpRequest对象。

函数没有type参数,返回的结果默认为json类型。

ajax()

ajax主要是执行异步请求,是JQUery的底层AKAX封装的实现,高层封装为$.get(),$.post()等。另外ajax()方法返回一个XMLHTTPRequest对象。

比如下面代码:

var xmlHttpRequest=$.ajax({url:"test",async:false})

总结

在进行前端代码编写的时候,如果只是更改小规模的数据的时候,采用ajax的方式能更好的方便用户体验,而使用JS的底层的代码显得相对复杂,JQuery能够帮助我们更好的进行开发。同时\$.get()和\$.post()方法返回的都是字符串(不设置dataType的情况),\$.getJSON()返回的是JSON数据。使用\$.ajax(),返回的是一个XMLHttpRequest对象。


__EOF__

作  者Dimple
出  处/view/26
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本
声援博主:如果您觉得文章对您有帮助,可以点击下方的鼓掌一下。您的鼓励是博主的最大动力!如有疑问请留言!


文章评论

我的名片

网名:Dimple | 裤兜有怪兽

职业:Java开发工程师

现居:四川省-成都市

Email:bianxiaofeng@sohu.com

每日一句

最近更新

点击排行

猜你喜欢