文档章节

Javascript之Ajax基础知识

 沉非
发布于 2017/08/22 09:05
字数 1097
阅读 5
收藏 0

Ajax:async javascript and xml  异步的JS和XML

    -> 客户端JS中的方法,用来向服务器端发送请求(还可以传递给服务器端数据),然后把服务器端返回的内容获取到(ajax一般是运行在客户端的浏览器中的)

Ajax四步:

    创建一个AJAX对象(下面的这种写法在IE6及更低版本的浏览器中不支持)

    -> var xhr = new XMLHttpRequest;

    发送前的基本信息的配置:get:配置请求的方式,url:打开一个url地址(配置向服务器端地址发送请求),false:同步请求,true:异步请求,默认是true;[username]向服务器提供请求的用户名;[userpass]:向服务器提供请求的用户密码;后面两个值一般都不写,只有服务器做了安全的限制,只允许特定的用户访问的话,我们才需要传递

    -> xhr.open("get",url,false,[username],[userpass])

    给onreadystatechange事件绑定一个方法,监听状态的改变(只要状态改变,就会触发此方法的执行)

    -> xhr.onreadystatechange = function(){

        0 UNSENT:当前的请求还没有发送

        1 OPENED URL地址已经打开(发送前的参数配置已经完成)

        2 HEADERS_RECEIVED 响应头信息已经接受

        3 LOADING 主要返回的内容正在服务器端进行准备处理

        4 DONE 响应主题的内容已经成功返回到客户端

        xhr.status:HTTP网络状态码,描述了服务器响应内容的状态

            200 OR ^2\d{2} (200或者以2开头的):都代表响应主体的内容成功

            301 -> 永久重定向/永久转移

            302 -> 临时重定向/临时转移  服务器的负载均衡

            304 -> 本次获取的内容是读取缓存中的数据

            400 -> 客户端传递给服务器端的参数发生错误  

            401 -> 无权限访问

            404 -> 客户端访问的地址不存在

            500 -> 未知的服务器错误

            503 -> 服务器已经超负荷

        if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){

           var val =  xhr.responseText;

        }

    }

    发送请求:参数是请求主体中传递给服务器的内容

    -> xhr.send(null);

 

xml:可扩展的标记语言(在XNL文件中使用的标签都是自己扩展的)

    -> 利用自己扩展的有规则的标记来存储相关的数据

 

//-> HTTP METHOD: 客户端服务器端发送请求的方式
    // -> 以下的请求方式不管哪一种都可以向服务器传递数据,也可以从服务器获取到数据,而且从本质意义上讲以下的方式是没有任何的区别的,例如:用POST做的事情,用GET也能做,
    // 而我们给大家接下来讲的区别都是目前开发这门约定俗称的规范:
    //GET:一般应用于从服务器获取数据(给服务器的数据少,从服务器拿的数据多,项目中最常用的请求方式就是GET)
    //使用GET请求给服务器传递内容一般都使用URL问号传参的方式
//    xhr.open("get","/getList?num=12");
    //POST:一般应用于向服务器推送数据(给服务器的多,从化服务器拿的少)
    //使用post请求给服务器传递内容我们一般都是用请求主体的方式传递给服务器
//    xhr.open("post","/getList");
//    xhr.send('{"name":"zhufeng","age":"7"}');
    
    //PUT:一般应用于给给服务器上增加资源文件(上传图片功能)
    //DELETE:一般应用于从服务器上删除资源文件
    //HEAD:一般应用于只获取服务器的响应头信息

 

GET PK POST:

    大小问题:get请求传递给服务器的内容存在大小的限制,post理论上是没有限制,原因是因为get是通过url传参给服务器,而每个浏览器对于URL的长度存在限制,谷歌8KB,火狐1KB,IE2KB的长度限制,如果超出长度限制,浏览器会把超出的部分内容截取;

    缓存问题:get请求会出现缓存(这个缓存不一定是304),post是没有缓存的;在项目中我们的GET请求一般不会让其出现缓存“清除缓存”:在URL后面追加一个随机数

    xhr.open("get", "/getList?name=12&_=" + Math.random())

    安全问题:一般来说GET不安全,而POST相对安全一些

 

© 著作权归作者所有

粉丝 1
博文 32
码字总数 24934
作品 0
海淀
程序员
私信 提问
javascript——从「最被误解的语言」到「最流行的语言」

JavaScript曾是“世界上最被误解的语言”,因为它担负太多的特性,包括糟糕的交互和失败的设计,但随着Ajax的到来,JavaScript“从最受误解的编程语言演变为最流行的语言”,这除了幸运之外,...

modernizr
2014/05/20
1K
12
asp.net的Ajax学习进阶

asp.net的Ajax学习进阶 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.6.3 1.什么是Ajax? 2006年忽如一夜春风来,众多涉及到Web开发的站点都在谈Ajax,那么到底什么是Aja...

晨曦之光
2012/03/09
146
0
黑马程序员:前端学习路线图

前端很火,想自学前端的人也多。作为过来人,知道自学的辛苦。特来给大家分享这份学习路线图,让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。若是觉得有用记得给点个赞哦!无论...

传智播客
2017/03/08
1K
2
Ajax 入门总结

(由于Eclipse RAP用到了开源的Ajax框架 qooxdoo, 并且自定义UI需要用js表达, 所以不得已, 先学习一下Ajax) 进入Ajax领域出现了几个小问题: Tomcat安装, 无论怎么弄webapps目录下,永远都不...

晨曦之光
2012/03/09
154
0
PHP学习路线图 最全PHP自学指南

对于广大零基础的PHP自学者,往往不知道如何系统的学习PHP,导致平白浪费了很多时间。本文将为大家带来最详细的php学习路线图,同时还会附上相应的权威教程,让广大PHP自学者少走许多弯路。 ...

W3Cschool小编
2018/04/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面试爱奇艺,竟然挂在第5轮……

今天给大家分享我曾经在爱奇艺的面试,过程还是比较有意思的,可以给大家一些参考 <br> 聊骚阶段 嗲妹妹:你好,我是爱奇艺的HR,我们正在招聘运维开发岗位,请问您最近有在看工作机会吗? ...

上海小胖
今天
5
0
Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
解决多线程并行加载缓存问题(利用guava实现)

依赖 com.google.guava:guava:20.0 import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import j......

暗中观察
昨天
4
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部