详细的ajax使用

AJAX简介:

1.AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
2.AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
3.AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
4.AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

ajax异步请求的步骤

1.创建异步对象
2.绑定监听事件(接收请求)
3.打开链接(创建请求)
4.发送请求

创建异步对象

标准创建 ie8以上的版本支持的创建方式

var xhr=new XMLHttpRequest();

IE8以下版本创建
通过判断window.XMLHttpRequest来判断浏览器是否支持标准创建

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

异步对象的属性和方法

1.readyState属性
值0~4,5个状态

0:请求未初始化
1:已经打开到服务器的连接,正在发送请求
2:接收响应头
3:接收响应主体
4:响应数据接收成功

2.status 服务器的响应状态码
当status的值为200时,表示服务器正确处理了请求,并给出了响应

3.onreadystatechange
当xhr对象的readyState属性值发生改变时自动的激发

xhr.onreadystatechange=function(){
//此方法会被调用4次
//最后一次,readyState==4
//并且响应状态码为200时,才是我们要的响应结果 xhr.status==200
if(xhr.readyState==4 && xhr.status==200){
//把响应数据存储到变量result中
var result=xhr.responseText;
 }
}

创建请求,打开连接

xhr.open(method,url,isAsyn);
method:请求的方法(get/post...),一个string格式
url:访问的服务器的地址(接口),string
isAsyn:是否采用异步的方式请求 boolean (true异步/false同步)

发送请求

xhr.send(body)

使用get方法,body为null,或者不写
使用post方法,要创建请求主体

发布了41 篇原创文章 · 获赞 8 · 访问量 1953

猜你喜欢

转载自blog.csdn.net/big_white_py/article/details/103413432