📘
技术积累
  • 简介
  • 学习方法
    • 如何提高编程技能
  • 基础知识
    • Linux
      • Linux常用指令
      • rsync
      • VIM
      • tmate命令行分享
      • 命令别名存储
      • 项目服务器重启
    • 设计模式
    • 自动化接口使用
    • 项目经理培训
    • 报价策略
    • 培训材料撰写
  • 工具
    • Ajax
    • AutV
    • axios
    • Babel
    • bower
    • codecov
    • crypto
    • CSS3D
    • Docker
    • Echarts
    • Git
      • 如何删除项目
      • 多个ssh_key的生成与使用
      • 常用命令清单
    • Gitbook
      • Gitbook 更多配置
      • Markdown 标记示例
    • gulp
    • Istanbul
    • JEST
    • jMeter
    • js-md5
    • Kama
    • LESS Sass 编译工具Koala介绍
    • Lodash
    • Markdown
    • Maven
    • Moment
    • Nginx
    • NPM
    • NVM
    • particles.js粒子效果
    • PM2
    • Qs
    • Swagger
    • Webpack
    • Webpack
    • Yarn
    • Yeoman使用
  • 平台
    • 代码托管平台 GitLab
    • 代码安全平台 sonarqube
  • 语言和框架
    • 工作流
    • Angular
      • FUSE-Angular前端框架项目初始化
      • AngularJs-toaster-Angular提示弹框插件
      • ng-file-upload-Angular上传图片插件
      • ngclipboard-Angular复制到剪贴板插件
    • Vue
      • ElementUI-Vue前端框架项目初始化
      • clipboard使用
      • mobileSelect.js使用
      • vue-cookies使用
      • vue-fullpage使用
      • vue-router使用
      • Vue的Ref属性
      • Vuex使用
      • Vux使用
      • vux-uploader使用
      • Vue生命周期图例
      • iview-loader使用
    • cycleJs
    • ES6
      • async/await
    • react
      • react生命周期
      • create-react-app
      • Rematch
      • react-router
      • react-router-dom
      • css-in-js
    • TypeScript
      • VueAndTypeScript
    • 微信小程序
    • Hexo博客框架
      • Hexo博客框架-图片问题处理
      • Hexo博客框架-切换主题
    • SmartClient
    • HybridApp混合开发
      • uniapp
  • 代码审查
    • 代码命名规范
    • 页面代码结构
    • JavaScript标准编码风格
    • AirbnbJavaScript风格指南
  • 其他
    • 收藏|激发灵感的33套网页配色方案(附色值)
    • KPI&OKR
    • 测试自动化
    • view
    • 前端面试
      • 项目方面
      • html+css
      • JavaScript方面
      • JavaScript面试
      • 框架方面
      • 前端面试3+1
        • 20190420
        • 20190419
        • 20190418
        • 20190417
    • Linux面试题
    • JAVA面试
    • 测试面试
    • 钉钉使用
    • sd360
  • 前端知识积累
    • css3单位汇总
    • CSS解决loading效果
    • 深度克隆的方法
    • 加密技术
    • 解决ios下的微信页面背景音乐无法自动播放问题
    • 一套绝佳的图标字体库和CSS框架:Font Awesome
    • 关于ico图标不显示解决办法
    • 提升页面响应速度
    • innerHTML引入的script如何使用
    • JavaMap转Json
    • JS开发工具大全
    • 移动端插件
    • 移动端页面通过前端方法禁止ios页面横屏方法
    • 图片资源网站
    • 排序方式
    • 图片预览上传
    • Windows部署时脚本报错
Powered by GitBook
On this page
  • 1 什么是Ajax
  • 1.1 同步
  • 1.2 异步
  • 2 XMLhHttpRequest对象
  • 2.1 创建XMLhHttpRequest对象
  • 2.2 XMLhHttpRequest和本地文件
  • 2.3 了解HTTP
  • 一个HTTP请求包括四个部分
  • 服务器返回HTTP响应包括3个部分
  • 2.4 GET请求与POST请求的差异
  • GET
  • POST
  • 2.5 HTTP状态码
  • 2.6 XMLHttpRequest发送请求
  • 2.7 XMLHttpRequest取得响应
  • 3.JSON基本概念
  • 3.1 解析JSON
  • 规范的JSON返回值
  • 4.Jquery中的ajax使用
  • 5.跨越问题
  • 5.1判断跨域
  • 5.2如何解决跨域
  • 1、ajax的实现和原理
  • 2、Ajax的优缺点各说三条
  • 3、AJAX机制,open的参数是什么
  • 4、请解释 JSONP 的工作原理,以及它为什么不是真正的 AJAX
  • 5、XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
  • 6、常见状态码的含义

Was this helpful?

  1. 工具

Ajax

Previous工具NextAutV

Last updated 4 years ago

Was this helpful?

作者:王志伟

邮箱:wangzhiwei@yumaomoney.com

更改历史

*2018-10-23     高天阳     迁移jquery使用Ajax示例
*2018-10-17     王志伟     初始化文档

1 什么是Ajax

Ajax全称:Asynchronous JavaScript and XML Ajax不是某种变成语言 而是一种无需重新加载整个网页的情况下能够更新部分网页的技术。

1.1 同步

1.2 异步

2 XMLhHttpRequest对象

2.1 创建XMLhHttpRequest对象

    //实例化XMLhHttpRequest对象
    var XHR = new XMLHttpRequest();

IE6以下浏览器不支持XMLhHttpRequest对象

    if(window.XMLHttpRequest === undefined){
        window.XMLHttpRequest = function(){
            try{
                //如果可用,则使用ActiveX对象最新版本
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            }
            catch(e1){
                try{
                    //否则,回退到较旧的版本
                    return new ActiveXObject("Msxml2.XMLHTTP.3.0");
                }
                catch(e2){
                    //否则,抛出错误
                    throw new Error("XMLHttpRequest is not supported");
                }
            }
        }
    }

2.2 XMLhHttpRequest和本地文件

2.3 了解HTTP

Http 是计算机通过网络进行通信的规则 http 是一种无状态的信息 是指比如客户获得一张网页之后关闭浏览器,然后再一次启动浏览器,再登录该网站,但是服务器并不知道客户关闭了一次浏览器

一个完整的HTTP请求,通常包括7个步骤

  • 建立TCP链接

  • Web浏览器向Web服务器发送请求命令

  • Web浏览器发送请求头部信息

  • Web服务器应答

  • Web服务器发送应答头信息

  • Web服务器向Web浏览器发送数据

  • Web服务器关闭TCP连接

一个HTTP请求包括四个部分

  • HTTP请求方法或“动作”GET/POST

  • 正在请求的地址(url)

  • 一个可选的请求头集合,其中可能包括身份验证信息(客户端环境信息)

  • 一个可选的请求主体(查询字符串、表单信息)

服务器返回HTTP响应包括3个部分

  • 一个数字和文字组成的状态码,用来显示请求的成功和失败

  • 一个响应头集合

  • 响应主体

2.4 GET请求与POST请求的差异

GET

  • 一般用于信息获取

  • 使用URL传递参数

  • 对发送的信息数量有限制 2000个字符

POST

  • 一般用于修改服务器上的资源

  • 对所发的信息数量无限制

2.5 HTTP状态码

2.6 XMLHttpRequest发送请求

open(method,url,async) send(string)

request.open("GET","get.php",true);
request.send()
request.open("POST","get.php",true);
request.send()
request.open("GET","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=高天阳&age=26");

2.7 XMLHttpRequest取得响应

    var request = new XMLHttpRequest();
    request.open("GET","get.php",true);
    request.send();
    request.onreadystatechange = function(){
        if(request.readyState ===4&& request.status===200){
            request.responseText
            //做你的操作
        }
    }

应用场景?

3.JSON基本概念

JSON:Javascript对象表示法(Javascript Object Notation) JSON是存储和交换文本信息的语法,类似XML。它采用键值对的方式来组织,易于人们阅读与编写,同时也易于机器解析与生成。 JSON是独立语言,也就是说不管什么语言都可以解析Json,只需要按照JSON的规则即可

var jsonStr='{"result":[{"name":"zhiwei","age":"18"},{"name":"gaogao","age":"20"},{"name":"xiaoyu":"age":"14"}]}'

3.1 解析JSON

eval和JSON.parse()的区别

禁止使用eval的原因

var jsonStr='{"result":[{"name":"zhiwei","age":"18"},{"name":"gaogao","age":"20"},{"name":"xiaoyu","age":"14"}]}'

//var jsonObject =eval('('+jsonStr+')');
//var jsonObject = JSON.parse(jsonStr);
alert(jsonObject[0].age)

规范的JSON返回值

{
    "status":"success"
    "msg":"not find"
    "data":{
        "name":"zhiwei..."
    }
}

4.Jquery中的ajax使用

$.ajax({
    type: 'GET', 
    url: '999.php', 
    data: {
        uname:'Tom', age: 20
    }, 
    beforeSend: function(){ 
        console.log('before send....'); 
        console.log(arguments); 
    }, 
    success: function(){ 
        console.log('success....'); 
        console.log(arguments); 
    }, 
    error: function(){ 
        console.log('error....'); 
        console.log(arguments); 
    }, 
    complete: function(){ 
        console.log('complete....'); 
        console.log(arguments); 
    } 
});

5.跨越问题

Javascript出于安全方面的考虑,不允许跨域调用其他页面的对象、什么是跨域呢,简单地理解就是因为Javascript同源策略的限制

5.1判断跨域

5.2如何解决跨域

$.ajax({
    type:"GET",
    url:"url",
    dataType:"jsonp",
    jsonp:"callback",
    success:function(){
    ...
    }
})

服务器端的改动

相关面试题

1、ajax的实现和原理

2、Ajax的优缺点各说三条

3、AJAX机制,open的参数是什么

4、请解释 JSONP 的工作原理,以及它为什么不是真正的 AJAX

5、XMLHttpRequest对象在IE和Firefox中创建方式有没有不同

//IE中通过new ActiveXObject()得到,Firefox中通过newXMLHttpRequest()得到

6、常见状态码的含义

  • 200 OK 客户端请求成功

  • 301 资源(网页等)被永久转移到其他URL

  • 400 Bad Request 客户端请求有语法错误,不能被服务器所理解

  • 403 Forbidden 服务器收到请求,但是拒绝提供服务

  • 404 Not Found 请求资源部存在,输入了错误的URL

  • 500 Internal Server Error 服务器发生不可预期的错误

  • 503 Server Unavailable 服务器当前不能处理客户端的请求,一段时间后可能恢复正常。

开发和测试时XMLhHttpRequest对象的使用差异

如果在解析对象的同事 格式化对象属性 将age的数据转化成出生年份 推荐json检测工具

方法一 代理

方法二 JSONP 解决主流浏览器Get请求 不支持POST请求

方法二 XHR2

https://jsonlint.com/
readyState属性