ajax

最新推荐文章于 2021-08-05 20:24:21 发布

UKey_

最新推荐文章于 2021-08-05 20:24:21 发布

阅读量538

点赞数

分类专栏： Web 文章标签： ajax xmlhttprequest 同步-异步

本文链接：https://blog.csdn.net/Move_now/article/details/52432923

版权

Web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Ajax:asynchronous javascript and xml,是可以与服务器进行(异步/同步)交互的技术之一
最大特点:页面不刷新
(一)ajax是xhtml css javascript xml XMLHttpRequest对象(ajax对象)其中XMLHttpRequest是ajax的官方名称
(二)使用ajax:
      1.创建ajax对象
         1.1 主流(火狐谷歌)等浏览器,包括IE7以上版本的浏览器
              方式：var xhr=new XMLHttpRequest;
         1.2 IE(6/7/8)版本
              方式：var xhr=new ActiveXObject("Msxml2.XMLHTTP.6.0");
         1.3 区别浏览器

    if(typeof XMLHttpRequest != 'undefined')  
    var xhr = new XMLHttpRequest;
    else 
    var xhr = new ActiveXObject('Msxml2.XMLHTTP6.0');

2.发送对服务器的请求

    //创建一个新的http请求
    xhr.open(请求方式get/post,请求地址(url),异步/同步(true/false));
    //发送请求
    xhr.send(post请求输入要传递的数据/get请求设置null);

      3.接收服务器返回的信息
         3.1 浏览器可以接受的信息ajax都可以接受
         3.2 ajax(XMLHttpRequest)对象的成员:
              属性:
                      responseText 以字符串的形式接收服务器端返回的信息
                      readyState 表示ajax的状态值
                      onreadystatechange 事件,该事件可以感知ajax状态的变化
              方法:
                      abort 取消当前请求
                      getAllResponseHeaders 获取响应的所有Http头
                      getResponseHeader 从响应信息中获取指定的Http头
                      open 创建一个新的http请求，并指定请求的方法和url
                      send 发送请求到http服务器并接收回应
                      setRequestHeader 单独指定请求的某个http头
         3.3 ajax的五种状态(readyState)
              0: 创建ajax对象完毕，但未调用open方法
              1: 请求已经创建，但未调用send方法
              2: 请求已经发送完成
              3: 服务器的数据返回了一部分
              4: 服务器的数据返回完毕，并且连接已关闭
      4.get/post方式的ajax请求:
         4.1 get和post的主要区别:
              一.get方式给服务器传递的数据量有大小限制，在2k左右，post方式传送的数据量没有大小限制，但是在php.ini中默认上限是8M
              二.post传送数据更安全
            三.传送数据的方式不一样，get方式在url后以请求字符串形式传递参数，post方式是把数据以xml形式传递给服务器
         4.2 ajax的get请求:
              一.在url地址后以请求字符串形式处理数据，比如:

        xhr.open('get','test.php?action=login');

              二. 对中文 = &等特殊字符进行处理:
                      在php中可以用函数urlencode()/urldecode()对特殊符号进行编码和反编码处理
                      在javascript中使用encodeURIComponent()对特殊符号进行编码
         4.3 ajax的post请求:
              一.给服务器传递数据需要调用send(请求字符串数据)
              二.post模仿form表单把数据传递给服务器(设置表头)

        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//写在open之后,send之前

      5.同步/异步
         异步:同一时间点允许执行多个进程 true(open方法中默认是true)
         同步:同一时间点只允许执行一个进程 false
         举例说明:当html页面中有图片进行加载时，如果ajax是异步请求，那么浏览器可以一边执行ajax一边加载图片；如果是同步请求，浏览器就必须先执行ajax之后再接着加载图片