Ajax

4 篇文章 0 订阅

Ajax

  • Ajax :Asynchronous JavaScript and XML

  • 特征:向服务器请求额外的数据无需卸载页面(及时刷新)

  • abort() 中止加载

  • timeout 超时事件

  • getAllResponseHeaders() 获取所有响应头

  • getResponseHeader() 获取指定的响应头

  • readyState 准备状态

  • status 响应消息状态

  • encodeURIComponent 转换为URI编码格式

  • decodeURIComponent 将URI编码格式转为字符,解决乱码问题

     xhr.readyState===4 && xhr.status===200 //成功
  • URL地址中通过目录方式带入请求的类型 history news等
  • PHP 有多个文件,Ajax只有一个主文件。
  • async 默认是true,异步。如果设置false,是同步,不需要事件侦听
XMLHTTPReques
  • Ajax技术核心是XMLHttpRequest对象(简称XHR)

  • XHR的出现,提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息,这就意味着,用户只要触发某一事件,在不刷新网页的情况下,更新服务器最新的数据。

  • XMLHttpRequest Level 1 缺点:不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成。

  • XMLHttpRequest Level 2 可以发送跨域请求,在服务端允许的情况下;支持发送和接收二进制数据;新增formData对象,支持发送表单数据;发送和获取数据时,可以获取进度信息;可以设置请求的超时时间

Ajax过程

1、新建XMLHttpRequest对象

var request=new XMLHttpRequest();
IE 7以下 var request=new ActiveXObject("Microsoft.XMLHTTP");

2、打开要发送的地址通道。

request.open(“GET”,地址,同步/异步);

3、给XMLHttpRequest对象增加侦听器,用来侦听各种情况,包括各种链接状态

request.addEventListener(“load”,侦听函数)发送数据给打开的地址,

4、如果没有要发送的内容直接send()

request.send();

open

open 方法的所有参数

  • Method方法: GET POST PUT DELETE
  • URL地址:地址加端口号 例如"http://localhost:4006"
  • 同步还是异步,同步为false
  • user password 访问地址的用户名密码
GET和POST
  • 在提供服务器请求的过程中,有两种方式,分别是:GET和POST。在Ajax使用的过程中,GET的使用频率要比POST高
    • GET 请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到 URL 的末尾,以便提交给服务器。通过 URL 后的问号给服务器传递键值对数据,服务器接收到返回响应数据。特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理 ,以地址栏方式发送。
    • POST 请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的 POST 传输方式。。
    • GET方式允许发送自定义消息头,POST不允许。
    • GET时带参数,POST不带参数,如果希望每次请求都是最新的就需要加时间戳
    • POST以二进制流发送,把一个数据流切换为无数的包,
    • 请求消息头在前端请求,服务端获取请求头。
    • 服务端响应消息头,客户端获取响应头。

Ajax 封装

function ajax(url,data,method="GET",type="query"){
            return new Promise(function(resolve,reject){
                if(type.toLowerCase()==="query") data=QueryString.stringify(data);
                else if(type.toLowerCase()==="json") data=JSON.stringify(data);
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState===4 && xhr.status===200){
                        resolve(xhr.response);
                    }else if(xhr.readyState===4 && xhr.status!==200){
                        reject(xhr.status);
                    }
                }
                xhr.open(method,url+"?"+(method.toLowerCase()==="get" ? data : ""));
                xhr.send((method.toLowerCase()==="get" ? "" : data));
            })
        }

AJAX跨域

  • cros跨域
  • jsonp跨域
  • websocket解决
  • 代理服务:正向代理和反向代理
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值