异步与同步

这就是生活中的同步

    在JavaScript语言中,同步和异步的概念刚好相反。
 
    这JavaScript中同步就是:你不执行完上面的代码,那么下面的代码你就别执行;一步一步执行,这就是同步。
 
    异步就是可以一起执行的代码;

进程的概念

 
    进程 != 程序
    
    线程
 
    程序从开始到结束的一次执行过程叫做进程
 
    一个进程当中,程序同时运行的多个分支,叫做线程
 
    多线程异步执行,可以提高程序的效率

ajax的概念

ajax是前后端数据交互的重要手段
 
Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户体验。
 
Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术,是一串技术的集合,主要有:
 
    1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为
 
    2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求;
 
    3.服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据;
 
    4.其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其呈现到页面上。
 
 
由于 Ajax 包含众多特性,优势与不足也非常明显。优势主要以下几点:
    1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可);
    2.用户体验极佳(不刷新页面即可获取可更新的数据);
    3.提升 Web 程序的性能(在传递数据方面做到按需发送,不必整体提交);
    4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
 
而 Ajax 的不足由以下几点:
    1.不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前);
    2.前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会记录前后页面);
    3.搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容);

AJAX的使用

电话的接打顺序:
    1.首先要有一个电话;
 
    2.拨号;
 
    3.说话;
 
    4.听电话另一边的信息;
 
    //有一个电话:创建请求对象;
    1.var AJAX=new XMLHttpRequest( );
 
    //拨号:设置请求参数;
    2.AJAX.open('get','data/test.json',true);
 
    第一个参数:POST||GET
    POST和GET的区别:
    1.POST主要用来发送数据,GET主要用来接受数据;
    2.PSOT发送数据的安全性较好,而GET较差;
    3.POST发送数据不限制大小,而GET大小受限2~100k。
    什么时候用GET和POST:在数据获取时用GET方式,在操作数据时应使用POST方式。
 
    第二个参数:要请求的url
 
    第三个参数:接受一个布尔值,决定请求的方式
    为true时,服务器请求是异步进行的,也就是脚本执行send() 方法后不等待服务器的执行结果,而是继续执行脚本代码;
    为false时,服务器请求是同步进行的,也就是脚本执行send() 方法后等待服务器的执行结果的返回,若在等待过程中超时,则不再等待,继续执行后面的脚本代码!
    
    
    //观察状态(是否接通)
    3.ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200){
            func_succ(ajax.responseText);
        }else if(ajax.readyState == 4 && ajax.status != 200){
            //alert("ajax faild readyState:"+ajax.readyState+" status:"+ajax.status);
        }
    };
    
    //歪!
    4.ajax.send(null);
 

ajax.readyState

    0 -(未初始化)还没有调用send()方法
1 -(载入)已调用send()方法,正在发送请求
2 -(载入完成)send()方法执行完成,已经接收到全部响应内容
3 -(交互)正在解析响应内容
4 -(完成)响应内容解析完成,可以在客户端调用了

HTTP 状态码 ajax.status

    1**:请求收到,继续处理
2**:操作成功收到,分析、接受
3**:完成此请求必须进一步处理
4**:请求包含一个错误语法或不能完成
5**:服务器执行一个完全有效请求失败 100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本 200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求 300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET,但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码,现行版本中不再使用
307——申明请求的资源临时性删除 400——错误请求,如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖,请求资源不可访问
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求 500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用,有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

ajax缓存问题:用时间戳清除缓存;

ajaxGet('data/test.txt?t='+ new Date().getTime(),fn)

AJAX的封装

function ajaxGet(url,cb,data){
// 1要处理发送的数据;
data = data || {};
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
// 2时间戳解决缓存问题;
var d = new Date();
url = url + "?" + str + "__wzqT=" + d.getTime();
// 2开启ajax;
var AJAX = new XMLHttpRequest();
AJAX.open("get",url,true);
AJAX.onreadystatechange = function(){
if(AJAX.readyState == 4 && AJAX.status == 200){
cb(AJAX.responseText);
}
}
AJAX.send();
}

数据发送

POST的数据发送位置:

get发送的位置:

POST发送的数据和GET发送的数据被请求地址接收到后显示的格式不一致
GET发送的数据被解析成key和value
POST发送的数据会被解析成字符串
在发送数据之前ajax.send("user=admin"),设置请求头信息
 
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 
 

ajax异步的更多相关文章

  1. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  2. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  3. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  4. spring HandlerInterceptorAdapter拦截ajax异步请求,报错ERR_INCOMPLETE_CHUNKED_ENCODING

    话不多说,直接上正文. 异常信息: Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 问题描述: 该异常是在页面发送ajax请 ...

  5. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  6. ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码

    首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...

  7. ajax异步请求Response.Redirect重定向

    一个ajax异步请求报错->捕获异常->重定向错误提示页面.  一个简单的流程 结果一直搞不定.重定向无效.各种百度之. 后来突然想起 ajax的请求是不能在后台重定向的. 如果硬要重定向 ...

  8. AJAX 异步交互基本总结

    AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...

  9. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  10. JSON.stringify实例应用—将对象转换成JSON类型进行AJAX异步传值

    在上一篇中,对JSON.stringify()方法有了初步的认识,并且做了一些简单的例子.本篇将进一步将JSON.stringify用在复杂些的实例中,例如如下需求: 在进jQuery AJAX异步传 ...

随机推荐

  1. lucene字典实现原理(转)

    原文:https://www.cnblogs.com/LBSer/p/4119841.html 1 lucene字典 使用lucene进行查询不可避免都会使用到其提供的字典功能,即根据给定的term找 ...

  2. Java学习:线程间通信

    线程间通信 概念:多个线程在处理同一个资源,但是处理的动作(线程的任务)却不相同重点:有效的利用资源 分析:需要那些类 1 资源类:包子类 设置包子的属性 包子的状态:有true 没有false 2 ...

  3. - Gradle 翻译 Analyzer APK文件分析 MD

    目录 目录 APK文件分析 使用 APK 分析器分析您的编译版本 查看文件和大小信息 查看 AndroidManifest.xml 查看 DEX 文件 过滤DEX文件树视图 加载 Proguard 映 ...

  4. .net core 引入SwaggerUI教程

    Swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.方便前后端接口对接. 1.打开NuGet程序包,搜索“Swashbuckle ...

  5. jQuery中cookie的简单操作

    jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie. 用NuGet安装:PM>Install-Package js-cookie -Version 官网:http ...

  6. C#读取Excel文件,准换为list

    经常会用到,废话不多说直接贴代码 //读取Excel文件 public static DataTable ReadExcelToTable(string path)//excel存放的路径{try{ ...

  7. 推荐算法之Thompson(汤普森)采样

    如果想理解汤普森采样算法,就必须先熟悉了解贝塔分布. 一.Beta(贝塔)分布 Beta分布是一个定义在[0,1]区间上的连续概率分布族,它有两个正值参数,称为形状参数,一般用α和β表示,Beta分布 ...

  8. 由一个空工程改为SpringBoot工程

    1.先创建一个空的工程,创建springboot 工程  必须继承spring-boot-stater-parent 2.导入依赖 <parent> <groupId>org. ...

  9. Nginx中的break和last

    rewrite中的break和last 两个指令用法相同,但含义不同,需要放到rewrite规则的末尾,用来控制重写后的链接是否继续被nginx配置执行(主要是rewrite.return指令). 示 ...

  10. 3.Javascript实现instanceof

    instanceof instanceof 用于判断某个对象是否是另一个对象(构造方法)的实例.instanceof会查找原型链,直到null如果还不是后面这个对象的实例的话就返回false,否则就返 ...