Ajax知识

最新推荐文章于 2024-10-04 08:00:00 发布

巨龙王

最新推荐文章于 2024-10-04 08:00:00 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/qq_45812558/article/details/122706482

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

AJAX

概念

Ajax是异步的JS和XML 它不是一种新的编程语言,而是几种原有技术的结合体

Ajax是一种在无需重新加载整个页面的情况下能够更新部分网页的技术

给用户体验

优点:1.通过异步模式,提升了用户体验

2.优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用

3.Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载

缺点:1.不支持浏览器back回退按钮

2.安全问题 AJAX暴露了与服务器交互的细节

3.对搜索引擎的支持比较弱

XMLHttpRequest对象

是一种支持异步请求的技术,是AJAX的核心

作用

可以向服务器提出请求并处理响应,而不阻塞用户

可以在页面加载以后进行页面的局部更新

开启服务器

在对应文件夹中开启终端后输入 node app.js

如何使用Ajax

1.创建XMLHttpRequest对象,也就是创建一个异步调用对象

兼容各个版本

function createXHR(){
     //判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,firefox,opera等
     if(typeof XMLHttpRequest !="undefined"){
       return new XMLHttpRequest();//返回实例
     }else if(typeof ActiveXObject !="undefined"){
         //将所有可能出现的ActiveXObject版本放在一个数组中
       var xhrArr=['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
       //遍历创建XMLHttpRequest对象
       var len = xhrArr.length;
       for(var i=0;i<len;i++){
         try{
           //创建XMLHttpRequest对象
           xhr = new ActiveXObject(xhrArr[i]);
           break;
         }
         catch(ex){

         }
       } 
       return xhr; 
     }else{
       throw new Error('No XHR object availabel.')
     }
   }

2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL

1)创建HTTP请求

**open(method,url,async)**只是建立请求的一个方法

功能:创建HTTP请求,规定请求的类型、URL及是否异步处理请求

**PS:**open方法不会向服务器发送真正请求,它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错

参数:method:请求类型,GET或POST 可选

GET与POST的区别

默认请求是POST 与POST相比,GET更简单也更快,并且在大部分情况下都能使用,然而在一下情况中,必须使用POST请求:

1.无法使用缓存文件(更新服务器上的文件或数据库)

2.向服务器发送大量数据(POST没有数据量限制)

3.发送包含未知字符的用户输入时,POST比GET更稳定也更可靠

url:文件在服务器上的位置必须要指定的参数

用来设置服务器上文件的地址,改文件可以是任何类型的文件,如 .txt和 .xml,或者服务器脚本文件,如 .asp和 .php(在传回响应之前,能够在服务器上执行任务)

async:true(异步)或false(同步) 是一个布尔值可

异步:客户机就不等待服务器的响应;

同步:客户机就要等到服务器返回消息后采取执行其他操作

3.设置响应HTTP请求状态变化的函数

   //响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readtstatechange属性发生改变时触发
   xhr.onreadystatechange = function(){
   //异步调用成功,readyState === 4响应内容解析完成,可以在客户端调用 属性中State的S大写
     if(xhr.readyState === 4){
   //>=200异步调用彻底成功 ===304 表示之前请求成功过 资源没有发生改变 ===100 继续发送请求 ===404 页面找不到
     if((xhr.status >=200 && xhr.status<300) || xhr.status ===304){
     //获得服务器返回的数据.
         }
     }
   }

4.发送HTTP请求

请求发往服务器 -> 服务器根据请求生成响应 -> 传回给XHR对象

发送请求

send(string)

功能:将请求发送到服务器

参数:string仅用于post请求

PS:仅在POST请求时可以传入参数,不需要则发送null,在调用send方法之后请求被发往服务器

如何添加HTTP头

如果需要像HTML表单那样POST数据,需使用setRequestHeader()来添加HTTP头,然后在send()方法中规定希望发送的数据

xmlhttp.setRequestHeader(header,value)

使用:xmlhttp.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’);

 xhr.send(null);

5.获取异步调用返回的数据

设置响应HTTP请求状态变化的函数

在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充

1)responseText —从服务器进程返回数据的字符串形式

2)responseXML—从服务器进程返回的DOM兼容的文档数据对象

3)status—从服务器返回的数字代码,如404(未找到)和200(已就绪)

— 200 (GET 请求成功) 201(POST请求成功)

301 (永久重定向) 302 (临时重定向)

304 (协商缓存,服务器文件来修改)

4)status Text—伴随状态码的字符串信息

6.使用JS和DOM实现局部刷新

渲染数据

      if((xhr.status >=200 && xhr.status<300) || xhr.status ===304){
           //获得服务器返回的数据
              data = JSON.parse(xhr.responseText);
           //渲染数据到页面中
              renderDataToDom();
         }

//渲染数据方法
function renderDataToDom(){
      var img = data.slider,i,
          len=img.length,str="",
          banner=document.getElementsByClassName("banner");
      for(i=0;i<len;i++){
           str +='<a href = "'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></a>';
            }
            banner.innerHTML = str;
   }

跨域

从一个域名的网页去请求另一个域名的资源,严格一点的定义是:只要协议,域名,端口有任何一个的不同,就被当做是跨域

同源策略

同源:域名,协议,端口三个均相同

如何解决跨域

跨域资源共享

使用JSONP(常用)

JSONP是应用JSON的一种新方法,也是一种跨域的解决方案

JSONP由两部分组成:回调函数和数据

(回调函数是当响应到来时应该在页面中调用的函数

数据就是传入回调函数中的JSON数据)

原理:直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的

通过script标签引入js文件=>js文件载入成功后=>执行在url参数中指定的函数

封装JSONP

 function getJSONP(url,callback){
     if(!url){//如果没有
       return;
     }
     //声明数组来随机生成函数名
     var a=['a','b','c','d','e','f','g','i','h','j'],
         r1 = Math.floor(Math.random()*10),
         r2 = Math.floor(Math.random()*10),
         r3 = Math.floor(Math.random()*10),
         name = 'getJSONP'+a[r1]+a[r2]+a[r3],
         cbname = 'getJSONP.'+name;
        //判断url地址中是否含有?号
        if(url.indexOf('?' === -1)){
          url +='?jsonp=' + cbname;
        }else{
          url +='&jsonp=' + cbname;
        }
        //动态创建script标签
        var script = document.createElement('script');
        //定义被脚本执行的回调函数
        getJSONP[name] = function(){
          try{
              callback && callback(data);
          }catch(e){
            // 
          }finally{
            //最后删除该函数及script标签
            delete getJSONP[name];
            script.parentNode.removeChild(script);
          }
        }
        //定义script的src
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }

调用方法

url 和回调函数

  getJSONP("http://class.imooc.com/api/jsonp",function(data){
     console.log(data);
   });

修改document.domain

使用window.name

JSON

概念

JSON全称是JS对象表示法,它是一种数据交换的文本格式,而不是一种编程语言,用于读取结构化数据,目的是取代繁琐笨重的XML格式

JSON 可以把JSON数据结构解析为有用的JS对象

语法规则

JSON的语法可以表示以下三种类型的值:

简单值(简单数值): 简单值使用与JS语法相同,可以在JSON中表示字符串、数值、布尔值和null

字符串必须使用双引号表示,不能使用单引号,数值必须以十进制表示,且不能使用NAN和Infinity

PS:JSON不支持JS中的特殊值undefined

对象:对象作为一种复杂数据类型,表示的是一组有序的键值对儿,而每个键值对儿中的值可以是简单值,也可以是复杂数据类型的值

JSON中对象的键名必须放在双引号里面,因为JSON不是JS语句,所以没有末尾的分号

PS:同一个对象中不应该出现两个同名属性

数组:数组也是一种复杂数据类型,表示一组有序的值得列表,可以通过数值索引来访问其中的值

PS:数组或对象最后一个成员的后面,不能加逗号

JSON对象

parse()

语法:JSON.parse()

功能:将JSON字符转化成JSON对象

stringify()

语法:JSON.stringify()

功能:将一个值(JS对象)转为字符串,该字符串应该符合JSON格式,并且可以被JSON.parse()方法还原

JQUEY的ajax方法

$.ajax()

   $.ajax({
     url:"./test/1.json",  //请求地址
     type:"get",          //请求方式
     async:true,           //同步异步
     dataType:"json",      //数据格式
     success:function(imgData){   //请求成功的回调
       JQrenderDataToDom(imgData.slider); 
     }
   })

$.each()渲染

   function JQrenderDataToDom(data){
     var str="";
     $.each(data,function(index,obj){
     str +='<a href = "'+obj.linkUrl+'"><img src="'+obj.picUrl+'"></a>';
     console.log(obj)
    })
     $("#banner_jq").html(str);
   }