Ajax的原理?Ajax用法?

一、Ajax原理

        Ajax 全称是: Async JavaScript and XML 

是一个 JS+XML的数据对象异步无刷新更新网页      是一种无需刷新整个页面的情况下 能够更新部分网页内容的技术。简单来说就是通过XMLHttpRequest对象向服务器发送异步请求。从服务器获取数据,然后再通过javascript的操作dom元素来进行操作更新页面

二、Ajax原理的实现

   1.实例化xhr异步对象  var xhr=new XMLHttpRequest()
   2.建立请求连接 xhr.open('get','url地址',true) //请求类型 get ,post 路径:url地址 true:异步请求 ,false :同步请示
   3.发送请求 xhr.send() 
   4.发送是否成功  xhr.onreadystatechange=function(){if(xhr.readyState==4){ //有没有发送成功: http请求状态 :0,1,2,3,4 
             if(xhr.status==200) //服务器响应状态: 200<=xhr.status<300||xhr.status=304 代表成功  
             {
                 //请求成功后做的事:响应内容
                 //console.log(xhr.responseText);
             }
             else
             {
                 //请求失败做的事:给你一个状态
                 // console.log(xhr.status);
             }

     }}     

三、onreadystatechange事件

http请求状态码 :5个状态readyState值
    0    初始状态(ajax对象创建完成)
    1    已连接上(open方法正确执行了)
    2    发送完成(send执行完毕)

    3    接收完成    头部    url+get
    4    接收完成    身子    post

    0 1 2 3 4 状态,成功、失败都会触发完成4
服务器返回http响应码
    200<=xhr.status<300||xhr.status=304 代表成功

    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)

成功的状态码:
200 – 服务器成功返回网页
304 – 未修改
失败的状态码:
404 – 请求的网页不存在
503 – 服务器暂时不可用
500 – 服务器内部错误

猜你喜欢

转载自blog.csdn.net/frelly01/article/details/125836134