zoukankan      html  css  js  c++  java
  • 整理Ajax的点点滴滴

    最近看了下《Javascript高级程序设计》(第三版)关于Ajax部分,做了这篇笔记。

    一、常规用法

    第一步,创建XHR对象
    var xhr = new XMLHttpRequest();
    此方法兼容IE7+, 针对IE6需要使用new ActiveXObject("Microsoft.XMLHTTP");

    第二步,准备请求
    xhr.open("get","/testajax",false);
    参数分别为: 请求类型 、url、是否异步

    第三步,发送请求
    get请求的话就是xhr.send(null)
    send需要一个参数,因为get请求中参数会在url中,所以这里写null(之所以写null是因为不写的话在某些浏览器会有问题)。
    如果是post请求,那么这里面就写post请求需要的参数。
    但是首先需要设置content-type,例如:
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    然后发送数据xhr.send("fname=Bill&lname=Gates");

    第四步,请求发出去后,服务器响应的内容会自动填充到xhr对象的属性上
    有这些属性
    responseText 返回的文本
    responseXML 如果content-type为"text/xml'或者"application/xml"就把数据放这个属性
    status HTTP状态码
    statusText 状态说明

    第五步、根据status检查请求状态
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText )
    }else{}

    无论类型是什么,响应主题内容都会保存在responseText属性中。
    对于非xml格式数据而言,responseXML为null。

    第六步,如果是异步请求,那么需要监听readyState来判断请求的状态
    通过onreadystatuschange事件判断readyState的值

    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
    console.log("success")
    }
    };

    其他注意点:
    setRequestHeader用来设置头信息
    getResponseHeader得到响应头信息
    getAllResponseHeaders得到全部响应头信息

    get请求中,对参数使用encodeURIComponent方法

    post请求中,设置content-type,参数序列化传入,格式和get请求一样
    如果不设置content-type,那么后台就必须从raw request header中去得到参数

    二、xhr2中的功能

    1: FormData()序列化表单数据
    var data = new FormData();
    data.append("hello","world");
    xhr.send(data);
    或者
    xhr.send(document.forms[0])
    这样可以快速传入post参数,而且无需设置content-type。

    2: timeout超时
    xhr.timeout = 1000; //设置超时时间
    xhr.ontimeout = function(){}; //处理超时情况
    xhr.send(null);

    3:overrideMimeType
    重写MIME,MIME决定了你的responseXML或者responseText的值是否存在
    MIME由content-type设置

    4:进度事件,用来监视xhr的进度。
    提供了一系列的事件,可以做类似网页加载进度条的效果。

    三、跨域
    CORS实现ajax的跨域访问

    1: 标准的实现:
    首先,先发送一个跨域ajax请求(这里可以检测是否支持CORS,通过新建一个xhr对象,检测xhr2中的属性是否存在在这个对象来实现)。
    然后,普通情况下,我们肯定会发现控制台报错,类似无法访问跨域资源这种错误。
    这时需要服务器设置
    Access-Control-Allow-Origin:* 代表所有域名都可以访问到
    Access-Control-Allow-Origin: http://www.cnblogs.com 限定了域名
    请求和响应均不包含cookie信息

    2: IE的实现:
    通过XDomainRequest()来实现。
    直接改变contenttype属性来实现post请求
    xdr.contentType= "";
    不能发送同步请求

    3: 自定义头部:
    在CORS中是不支持的,但是有固定接口可以设置的头部来传输信息。

    4: 带凭证的请求(cookie、ssl等):
    客服端通过withCredentials设置为true来实现
    服务器返回相应的头部来确认即可。


    四、其他跨域技术


    1: 动态创建一个图片,src跨域,然后可以返回一个像素图或者204;
    返回后的处理在onload和onerror里面
    可以用于一些数据统计方面。

    2: JSONP

    五、服务器推送
    1、轮询
    2、长轮询
    3、HTTP流
    4、SSE
    5、Web Sockets
    先发一个http请求过去,服务器相应后会把http协议变为web socket协议
    链接变为 ws://
    var socket = new WebSocket("ws://xxx.com")
    没有同源限制
    通过 socket.readyState 来判断链接状态
    socket.close()关闭

    数据交互
    socket.send("xxx");发送消息
    消息内容只能是纯文本,所以对于复杂的数据需要序列化
    socket.onmessage = function(event){
    var data = event.data; //这里是服务器返回的数据
    }

  • 相关阅读:
    激活函数
    第五章 Odoo 12开发之导入、导出以及模块数据
    第四章 Odoo 12 开发之模块继承
    第三章 Odoo 12 开发之创建第一个 Odoo 应用
    第二章 Odoo 12开发之开发环境准备
    第一章 使用开发者模式快速入门 Odoo 12
    【linux之路】常用的命令
    【python之路46】内置函数2,是【python之路18】的补充
    【python之路45】tornado的用法 (三)
    【python之路44】tornado的用法 (二)
  • 原文地址:https://www.cnblogs.com/season-huang/p/3557269.html
Copyright © 2011-2022 走看看