zoukankan      html  css  js  c++  java
  • JavaScript之Ajax

    Ajax在前端开发中有着举足轻重的地位,关于Ajax的使用和注意事项一直是一个重要的话题,借此机会,本文希望对Ajax做一个全面的总结,彻底揭开Ajax的神秘面纱。

    一.什么是Ajax

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    二.Ajax的原生写法

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    2.实现流程

    创建 XMLHttpRequest对象——>打开请求地址,初始化数据——>发送请求数据——>监听回调函数状态——>收到服务器返回的应答结果。

    下面用具体的代码进行解释:

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    (3).关于status 由服务器返回的 HTTP 状态代码,200 表示成功,而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。(后面会有http状态码的详细解读)

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    四.GET or POST?

    作为Ajax最常用的两种数据提交方式,GET和POST有着自己的特点和适用场景,正确区分GET和POST的不同并根据实际需要进行选用在开发中十分重要,简单但是关键!

    先上一张GET 和 POST的比较图,从这张图中可以看出两者之间的差别:

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    七.JSON和JSONP

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    ajax很好,但不是万能的,ajax的请求与访问同样会受到浏览器同源策略的限制,不能访问不同主域中的地址。所以,为了解决这一问题,实现跨域访问,有很多种方式,上述提到的jsonp就是一种流行的方式,还有其他一些方式,我在这里就不展开说了,只是想说明ajax的使用也是有条件的,任何技术的实现都不会是没有限制的。跨域访问时一个很重要的知识点,之前专门写过一篇关于跨域访问的总结,还挺详细的,可以移步查看: javascript中实现跨域的方式总结

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    十.不可忽视的HTTP头文件

    http请求中的一个重要关注点就是请求头和响应头的内容,从这两个头文件中可以看出很多东西,当我们用发送一个ajax请求的时候,如果没有达到预期的效果,那么就需要打开浏览器的调试工具,从NetWork中找到相应的ajax请求,再通过查看请求头和响应头的信息,大体会知道这次请求的结果是怎么样的,结合响应的主体内容,可以很快找到问题。所以学会看http的头文件信息是前端开发中必须掌握的一个技能,下面就来看看具体的头文件信息。

    首先随便上一张sf中的完成一个搜索结果的http请求,可以从图中的右侧清楚看到请求头和响应头的内容,包括了很多个字段信息,这些字段信息就是我们需要掌握的知识点,下面挑出其中的重点字段进行分析。

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    1.请求头信息:

    Accept:客户端支持的数据类型
    Accept-Charset:客户端采用的编码
    Accept-Encoding:客户端支持的数据压缩格式
    Accept-Language:客户端的语言环境
    Cookie:客服端的cookie
    Host:请求的服务器地址
    Connection:客户端与服务连接类型
    If-Modified-Since:上一次请求资源的缓存时间,与Last-Modified对应
    If-None-Match:客户段缓存数据的唯一标识,与Etag对应
    Referer:发起请求的源地址。
    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    3.两者都可能出现的消息

    Pragma:是否缓存(http1.0提出) Cache-Control:是否缓存(http1.1提出)

    4.跟缓存相关的字段

    (1) 强制缓存 expire 和 cache-control

    (2) 对比缓存 Last-Modified 和 If-Modified-Since Etag 和 If-None-Match

    不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

     

    2.缺点:

    1. 无法进行操作的后退,即不支持浏览器的页面后退。
    2. 对搜索引擎的支持比较弱。
    3. 可能会影响程序中的异常处理机制。
    4. 安全问题,对一些网站攻击,如csrf、xxs、sql注入等不能很好地防御。
  • 相关阅读:
    周末复习所接触到的知识点
    新增一些需要记住的知识点和坑
    讨厌烦人的编码问题''
    dictionary 字典相关操作
    一些列表的基础知识和操作
    简单字符串语句
    一些简单的str语句
    c#学习之前言
    第六课时之HTML标题
    第五课时之HTML属性
  • 原文地址:https://www.cnblogs.com/guchengnan/p/9640043.html
Copyright © 2011-2022 走看看