深入理解ajax
http://www.imooc.com/code/13468 基础练习
http://www.imooc.com/video/5644 !ajax!








常用 for in循环 for(var x in json)
var json = JSON.parse(str); //把字符串解析成 JSON对象
var json = eval("(" + str + ")"); //把括号内字符当代码运行
var str1 = JSON.stringify(json); //将JSON转换成字符串
JSON.parse/eval():把它当成一段代码来看,来运行或者可以把字符串中的数组转换成真的数组;在要运行的东西里面加括号就会把它当成一个对象来看(在解析json时) 例:eval("("+json+")");
ajax:读取服务器下的文件
乱码:由于html和文件编码不一致
作用:与服务器做交互 在不刷新界面的情况下更改页面内容
异步:ture 全部刷新 有缓存
同步: false 一个一个刷新 (默认)
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true
get:让数据在地址栏显示出来 不安全 数据量 2K 分享和调试时用get
post:不让数据显示出来 相对安全 数据量:基本无限制
*在IE下有时候会出现只有第一次读取的值正常,后面的值都不正常,是因为AJAX缓存的问题
解决方法如下:
1、在服务端加 header("Cache-Control: no-cache, must-revalidate");(如php中)
2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0");
3、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache");
4、在 Ajax 的 URL 参数后加个随机数 如 url=url+"&"+Math.random();
5、第五种方法和第四种类似,在 URL 参数后加上 "?timestamp=" + new Date().getTime();
6、用POST替代GET:不推荐
这样每次请求的url都不一样(ajax的缓存便不起作用)确保每次加载的数据是最新的。
AJAX
function ajax(method, url, data, fn, fn2) {
// 1 创建http请求对象
var oAjax = null;
if (window.XMLHttpRequest) {
oAjax = new XMLHttpRequest(); //IE7+, Firefox, Chrome, Opera, Safari
} else {
oAjax = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
// 2 连接服务器
oAjax.open(method, url + "?" + data, true);
// 3 发送
if (method == "post") {
oAjax.send(data);
} else {
oAjax.send();
}
// 4 处理响应结果
oAjax.onreadystatechange = function () {
// on readystate change 当 状态值 改变 的时候发生的事件
if (oAjax.readyState == 4) {
//readtState:Ajax的工作状态 有5个值(0初始化,1载入,2载入完成,3解析,4完 成)
if (oAjax.status == 200) { //status:服务器状态 HTTP状态码
fn(oAjax.responseText);//请求成功函数
//responseText: ajax请求返回的值就存放到这个属性下面
responseXML: 解析XML shi
} else {
if (fn2) {//请求失败函数
fn2();
}
}
}
}
}
AJAX 传网页中数据 到后台

防止用户重复提交

对于ajax请求时用户体验的改善, -loading
beforeSend()

Complete()

深入理解ajax的更多相关文章
- 通过回调函数的理解来进一步理解ajax及其注意的用法
一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opaci ...
- JavaScript大杂烩12 - 理解Ajax
AJAX缘由 再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下 ...
- 深入理解ajax系列第八篇——表单提交
前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...
- 深入理解ajax系列第八篇
前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...
- 快速理解-Ajax
AJAX即“Asynchronous JavaScript and XML”,意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己手动写AJAX,大多 ...
- 逐渐深入地理解Ajax
Ajax的基本原理是:XMLHttpRequest对象(简称XHR对象),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.能够以异步方式从服务器获得更多信息.意味着用户不必刷新页面也能取得新 ...
- 理解Ajax
1.优化原则 优化的目的是希望降低程序的整体开销.虽然在程序中有许多因素可以优化,但是通常人们会认为这个开销就是程序的执行时间.其实我们更应该把重点放在对程序整体开销最大的那部分. 2.一切都是权 ...
- 深入理解ajax系列第一篇——XHR对象
× 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...
- JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)
ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载 ...
- 通过实例来理解ajax
点击一个按钮,然后将信息显示到指定的div内. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
随机推荐
- SSH整合方案一(带有hibernate.cfg.xml)
整体结构 1.导入响应的jar包 2.在web.xml中配置struts的过滤器和spring整合web的监听器 <!--配置Spring整合web的监听器--> <listener ...
- GCC编译器原理(三)------编译原理三:编译过程---预处理
Gcc的编译流程分为了四个步骤: 预处理,生成预编译文件(.文件):gcc –E hello.c –o hello.i 编译,生成汇编代码(.s文件):gcc –S hello.i –o hello. ...
- EF 事物Transaction简单操作
/// <summary> /// 申请提现 /// </summary> /// <param name="userId">用户id</ ...
- pyqt5-是否被编辑
setWindowModified(bool) 被编辑状态,显示*; 没有被编辑,不显示* isWindowModified() 窗口是否是被编辑状态 from ...
- new和delete动态分配和撤销内存
视频:C++引用及new和delete的使用 一.new用法 使用new运算符时必须已知数据类型,new运算符会向系统堆区申请足够的存储空间,如果申请成功,就返回该内存块的首地址,动态分配失败,则返回 ...
- python面向对象和面向过程介绍与区别
一.面向对象和面向过程的区别: a.面向过程: 1)根据业务逻辑从上到下写代码 2)开发思路是将数据和函数按照执行的逻辑顺序组织在一起 3)分开考虑数据与函数 定义性文字: 面向对象编程(Object ...
- 【Linux】LD_PRELOAD用法
转载https://blog.csdn.net/iEearth/article/details/49952047 还有一篇博客也可以看看https://blog.csdn.net/xp5xp6/art ...
- python(三)@staticmethod和@classmethod使用和区别
转载自[1] 一般要用某个类的方法,先要实例这个类. 但是可以通过@staticmethod和@classmethod,直接用“类.方法()”来调用这个方法. 而 @staticmethod和@cla ...
- MGR 架构 ~ DBA相关运维管理
一 简介:简述DBA相关管理MGR工作 二 监控 1 采用proxysql相关创造的view视图作为监控指标 三 备份 1 利用xtrabackup在读节点进行备份 2 设置binlog保留日期 四 ...
- Microsoft SQL - 数据类型
数据类型(Data Type) 数据类型 整数类型 Tinyint 8位无符号整数 Smallint 16位带符号整数‘ Int 32位带符号整数 Bigint 64位带符号整数 实数类型 Decim ...