Ajax小结

Anchorer 发布于2019-08-22 16:45 / 2744人阅读

摘要：技术核心对象简称。可以检测对象的属性，该属性表示请求响应过程的当前活动阶段。已经接收到全部响应数据。获取同步发送请求返回的数据使用和实现局部刷新

Ajax

概念理解

全称：Ajax是对Asynchronous Javascript + XML的简写。

作用：能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。

技术核心：XMLHttpRequest对象（简称XHR）。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。即可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。

数据格式：虽然名字中包含XML的成分，但Ajax通信与数据格式无关。这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML数据。

创建Ajax

创建XMLHttpRequest对象

   var xhr;  
   if (window.XMLHttpRequest){  //IE7+, Firefox, Chrome, Opera, Safari  
         xhr=new XMLHttpRequest();  
    }else{  // 兼容 IE6, IE5  
         xhr=new ActiveXObject("Microsoft.XMLHTTP");  
    }

对于异步请求，不必等待服务器响应，JS代码继续执行。
可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。

   0:未初始化。尚未调用open()方法。
   1:启动。已经调用open()方法，尚未调用send()方法。
   2:发送。已经调用send()方法，尚未接收响应。
   3:接收。已经接收到部分响应。
   4:完成。已经接收到全部响应数据。

只要readyState属性的值由一个值变成另一个值，就会触发onreadyStatechange事件，利用这个事件来检测每次状态变化后readyState值，获取服务器的响应也在这个事件中处理。

   xhr.onreadyStatechange = function(){
       If(xhr.readyState == 4){
           if(xhr.status >=200 && xhr.status = 304){
               alert(xhr.responseText);
           }else{
               alert(“Request was unsuccessful: ”+ xhr.status);
           }
       }
   };

创建一个新的HTTP请求,并指定请求的方法、URL及异步(true)/同步(false)

   xhr.open(method,url,async);  
   注意：open 的参数要牢记，很多面试官爱问这样的细节
       1)method：请求的类型；GET 或 POST
       2)url：文件在服务器上的位置
       3)async：true（异步）或 false（同步）
   注意：post请求一定要设置请求头的格式内容
       xhr.open("post","ajax_test.html",true);  
       xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //使用XHR模仿表单提交
       xhr.send("fname=Henry&lname=Ford");

发送HTTP请求

   xmlhttp.send(); 
   若是post请求，参数为作为请求主体发送的参数。
   若是get请求，参数为null。

获取同步发送请求返回的数据

   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
       alert(xhr.responseText);
   }else{
       alert(“Request was unsuccessful: ”+ xhr.status);
   }

使用JavaScript和DOM实现局部刷新

超融合服务器私有云设计小结对象小结个人小结小结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94636.html

高性能JavaScript（文档）

摘要：最近在全力整理高性能的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。最近在全力整理《高性能JavaScript》的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。前端开发文档高性能JavaScript 第1章：加载和执行脚本位置阻止脚本无阻塞的脚本延迟的脚本动态脚本元素 XMLHTTPRequest脚本注入推荐的无阻塞模式...

RayKr 2019-08-22 18:32 评论0 收藏0
ajax post导出excel小结(解决乱码问题)

摘要：当前有一个需求前端对当前页面的数据做筛选之后需要将其导出至文件且发送的请求需传入需验证的参数如页面信息尝试了提交及其他方法后出现乱码等问题最后用成功完成了导出。直接贴代码下面是解释这段代码不加会导致导出的出现乱码问题。当前有一个需求前端对当前页面的数据做筛选之后需要将其导出至excel文件且发送的请求需传入需验证的参数如页面token信息尝试了form提交及其他方法后出现excel...

tanglijun 2019-08-26 10:24 评论0 收藏0
前端测试框架mocha使用小结

摘要：称为测试用例，表示一个单独的测试，是测试的最小单位。它使用的浏览器环境，通过事件监听的方式检测测试的执行过程。前端的自动化测试还需慢慢探索，任重而道远。前端技术交流群欢迎加入安装 npm i -g mocha npm i chai -D //断言库模块测试比如有一个add函数 //add.js function add(a, b){ return a + b } modu...

asoren 2019-08-22 14:51 评论0 收藏0
前端测试框架mocha使用小结

摘要：称为测试用例，表示一个单独的测试，是测试的最小单位。它使用的浏览器环境，通过事件监听的方式检测测试的执行过程。前端的自动化测试还需慢慢探索，任重而道远。前端技术交流群欢迎加入安装 npm i -g mocha npm i chai -D //断言库模块测试比如有一个add函数 //add.js function add(a, b){ return a + b } modu...

yacheng 2019-08-05 18:00 评论0 收藏0
ajax 入门小结代码注释解析

摘要：最新的提交初始化请求对象它是浏览器具有主动请求数据的核心对象开始请求是方法铭文请求方式表单请求加密方式方法两个参数请求方式，请示地址打开通道获取数据后的回调即请求完成后在请求完成后返回的数据会在属性中这个属性是个字符串 Document #demo { font-family: Helvetica, Arial, sans-serif; ...

SwordFly 2019-08-20 10:47 评论0 收藏0