js基础之ajax
必须搞懂的几个问题:
1.如何创建ajax对象?
2.如何连接服务器?
3.如何发送请求?
4.监控请求状态的事件是什么?分几个阶段?如何获取返回值?
答:onreadystatechange事件:一、readyState属性(请求状态:0——>未初始化;1——>载入,已经调用send()方法;2——>载入完成,已收到相应内容;3——>正在解析内容;4——>完成);二、status属性(请求结果);三、responseText属性(取得结果)
一、读取服务器端文件
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);
}
}
};
}
window.onload=function(){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
ajax('abc.txt?t='+Math.random(),function(str){
//alert(str);//'[1,2,3]'
//alert(eval(str)[0]);//1,eval可以解析任何js代码,比如把'[1,2,3]'解析成数组
var arr=eval(str);
alert(arr[0].rank);//把json文件解析成数组
});
}
}
二、分页
var oUl = document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
var aBtn=document.getElementsByClassName('a');
var i=0;
for(i=0;i<aBtn.length;i++){
aBtn[i].index=i;//设置索引
aBtn[i].onclick=function(){
ajax('p'+(this.index+1)+'.txt',function(str){
var aData=eval(str);
oUl.innerHTML='';//循环前清空ul内的内容,否则会累加显示
for(i=0;i<aData.length;i++){
var oLi=document.createElement('li');
oLi.innerHTML='<b>'+aData[i].name+'</b><i>'+aData[i].rank+'</i>';
oUl.appendChild(oLi);
}
});
}
}
三、编写自己的ajax库
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);
}
}
};
}
js基础之ajax的更多相关文章
- AJAX学习前奏----JS基础加强
AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...
- Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
- js基础查漏补缺(更新)
js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...
- 前端面试题目汇总摘录(JS 基础篇)
JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...
- JS实现的ajax和同源策略
一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页 ...
- Ext.js基础
第一章:Ext.js基础 好书推荐 Javascript设计模式 征服ajax web 2.0开发技术详解 简介 基础要求 了解HTML.CSS.熟练JS.JS的OOP.AJAX JSP/PHP/AS ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.02更新)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域
js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...
随机推荐
- (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播
ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...
- mysql 查询开销
1.select @@profiling;2.set @@session.profiling=on;3.show profiles;4.show profile for query 2;
- Python学习笔记--XML的应用
XML的定义 XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 XML 标签没有被 ...
- IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
这个世界变化很快,IE8也快出来了,它将不在支持以前{filter:alpha(opacity=50);}的私有属性,转而支持更规范的私有属性-ms-filter: “progid:DXImageTr ...
- return 还是 不return
jQuery.fn.functiona = function() { //return this.each(function() { **** } jQuery(this).css('backgrou ...
- Windows下DLL查找顺序
目录 第1章说明 2 1.1 查找顺序 2 1.1.1 检查DllCharacteristics字段 3 1.1.2 读取manifset资源 3 1.1.3 读取manifs ...
- JavaScript及C# URI编码详解
转载自:http://www.cnblogs.com/artwl/archive/2012/03/07/2382848.html 应用Uri编码,可以把一个或多个Uri作为另一个Uri的参数(如果不用 ...
- CentOS安装vim
VMware下CentOS安装成功后,默认自带vi,但vi功能没vim丰富.以下为CentOS中安装vim: 用yum产看源中的vim安装包: [xi@localhost ~]$ yum search ...
- JVM性能调优
摘自:http://uule.iteye.com/blog/2114697 JVM垃圾回收与性能调优总结 JVM调优的几种策略 一.JVM内存模型及垃圾收集算法 1.根据Java虚拟机规范,JVM将 ...
- JSCore的基本使用
一.简单介绍 JSCore全称为JavaScriptCore,是苹果公司在iOS中加入的一个新的framework.该framework为OC与JS代码相互操作的提供了极大的便利.该工程默认是没有导入 ...