前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版

jQuery基础之Ajax(六)

首页2016-08-07 22:30:08Front-End
jQuery
  • ajax : Asynchronous Javascript And XML (异步的JavaScript和XML)

  • 创建ajax对象 var xhr = new XMLHttpRequest();

  • 准备发送请求

  • get

    • 传递的数据放在URL后面
    • 中文编码 encodeURI( '' );
    • 缓存 在数据后面加上随机数或者日期对象或者……;
  • post

    • 传递的数据放在send()里面,并且一定要规定数据格式
    • 没有缓存问题
  • form表单中:

    • action:
    • method:(默认是 get)
    • get: 会在url里面以 name=value , 两个数据之间用 & 连接
    • post:
  • enctype: "application/x-www-form-urlencoded"

  • url

  • 是否异步

    • 同步(false):阻塞
    • 异步(true):非阻塞
  • 正式发送请求

    • ajax请求处理过程

案列:

	var ajx = null;

  		if(window.XMLHttpRequest){//兼容处理
  			var ajx = new XMLHttpRequest();//一般浏览器
  		}else
  		{
  			ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
  		}
  		
  		//准备发送请求
  		ajx.open("get","ajax.txt",true);

  		//正式发送请求
  		ajx.send();
  		
  		//处理请求
  		ajx.onreadystatechange = function(){
  			if(ajx.readState == 4){
  				if (ajx.status == 200)//200是HTTP 请求成功的状态码
  				{
  					console.log(ajx.responseText);
  				}else{
  					alert("请求出错");
  				}
  			}
  		}
@前端进阶之旅: 代码已经复制到剪贴板
  • onreadystatechange :当处理过程发生变化的时候执行下面的函数

  • readyState :ajax处理过程

    • 0:请求未初始化(还没有调用 open())。
    • 1:请求已经建立,但是还没有发送(还没有调用 send())。
    • 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
    • 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
    • 4:响应已完成;您可以获取并使用服务器的响应了。
  • responseText :请求服务器返回的数据存在该属性里面

  • status : http状态码

fe

← PS基本切图及应用jQuery基础之Event(五) →