Ajax基础2
什么是服务器
网页浏览过程的分析
如何配置自己的服务器程序(AMP)
什么是Ajax
无刷新数据读取
异步,同步
Ajax基础(2)
使用Ajax
基础请求显示txt的文件
字符集编码
缓存,阻止缓存
动态数据,请求js或(json)文件
eval的使用
DOM创建元素
局部刷新,请求并显示部分网页文件
Ajax原理
http请求方法
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
var oAjax=null; if(window.XMLHttpRequest)
{
oAjax=new XMLHttpRequest();
}
else
{
oAjax=new ActiveXObject("Microsoft.XMLHTTP");
} //2.连接服务器
oAjax.open('GET', url, true); //3.发送请求
oAjax.send(); //4.接收服务器的返回
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4) //完成
{
if(oAjax.status==200) //成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
fnFaild(oAjax.status);
}
}
};
}
简单ajax
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1'); oBtn.onclick=function ()
{
ajax('data.txt', function (str){
//str->'[1,2,3,4]'
//alert(str);
var arr=eval(str); alert(arr[3]);
});
};
};
</script>
</head> <body>
请求服务器上的文件,这个文件放了一个数组<br />
请求文件放置数组里面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var aBtn=document.getElementsByTagName('a');
var i=0; for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
ajax('page'+(this.index+1)+'.txt', function (str){
var aData=eval(str); oUl.innerHTML='';
for(i=0;i<aData.length;i++)
{
var oLi=document.createElement('li'); oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>'; oUl.appendChild(oLi);
}
});
};
}
};
</script>
</head> <body>
<ul id="ul1">
</ul>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</body>
</html>
ajax和json的使用
GET---用于获取数据(浏览帖子);
POST--用于上传数据(如用户注册)
GET,POST的区别
get是在url的传数据,安全性,容量,
缓存
本节重点
什么是Ajax,同步和异步的区别
http请求方法中,get和post方式用什么区别
Ajax基础2的更多相关文章
- 史上最全的Ajax基础详解
同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列
AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ...
- Ajax基础--JavaScript实现
ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...
- jQuery基础---Ajax基础教程(二)
jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...
- jQuery基础---Ajax基础教程
jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...
- Ajax基础知识(二)
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- 原生AJAX基础讲解及兼容处理
原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...
随机推荐
- phpcms v9 0day
index.php?m=member&c=index&a=login 后缀 username=phpcms&password=123456%26username%3d%2527 ...
- MIT Scheme 使用 Edwin
MIT Scheme 的基本使用:http://www.math.pku.edu.cn/teachers/qiuzy/progtech/scheme/mit_scheme.htm 安装过程 安装bre ...
- C# 常用分页
var num = TCalcPager.CalcPageCount(addList.Count, TDefautValue.PageSize); ; i < num; i++) { var r ...
- jq 构造函数,然后再表单提交过程中对数据进行修改
先贴代码 <script type="text/javascript"> function appendText(){ var content = $("#t ...
- bestcoder Round #7 前三题题解
BestCoder Round #7 Start Time : 2014-08-31 19:00:00 End Time : 2014-08-31 21:00:00Contest Type : ...
- [译]Mongoose指南 - 查询
查询有带callback和不带callback两种方式 所有mongoose的callback都是这种格式: callback(err, result) var Person = mongoose.m ...
- JVM执行引擎总结(读《深入理解JVM》) 早期编译优化 DCE for java
execution engine: 运行时栈current stack frame主要保存了 local variable table, operand stack, dynamic linking, ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- 微信小程序开放公测了 晚上又可以通宵搞代码了
就在刚刚22:15分,微信公众平台的服务号发来好消息说小程序开放公测了,喜大普奔啊!!!码农们晚上又可以通宵搞测试了.之前还猜测16日微信小论坛小程序专场上会公布,没想到提前了那么多天,效率挺高的,而 ...
- 如何给wordpress外部链接自动添加nofollow
wordpress多作者博客可以丰富网站的内容,但同时也会产生一些无关的链接,例如有些投机的人会考虑在文章中随意添加外部链接,如果你不想给这些外部链接传递权重,你需要给这些外部链接加上 rel=&qu ...