必须搞懂的几个问题:

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的更多相关文章

  1. AJAX学习前奏----JS基础加强

     AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...

  2. Node.js基础与实战

    Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

  3. js基础查漏补缺(更新)

    js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...

  4. 前端面试题目汇总摘录(JS 基础篇)

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  5. JS实现的ajax和同源策略

    一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页 ...

  6. Ext.js基础

    第一章:Ext.js基础 好书推荐 Javascript设计模式 征服ajax web 2.0开发技术详解 简介 基础要求 了解HTML.CSS.熟练JS.JS的OOP.AJAX JSP/PHP/AS ...

  7. 前端工程师面试问题归纳(一、问答类html/css/js基础)

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  8. 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.02更新)

    温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...

  9. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

随机推荐

  1. (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  2. mysql 查询开销

    1.select @@profiling;2.set @@session.profiling=on;3.show profiles;4.show profile for query 2;

  3. Python学习笔记--XML的应用

    XML的定义 XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输数据,而非显示数据 XML 标签没有被 ...

  4. IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法

    这个世界变化很快,IE8也快出来了,它将不在支持以前{filter:alpha(opacity=50);}的私有属性,转而支持更规范的私有属性-ms-filter: “progid:DXImageTr ...

  5. return 还是 不return

    jQuery.fn.functiona = function() { //return this.each(function() { **** } jQuery(this).css('backgrou ...

  6. Windows下DLL查找顺序

    目录 第1章说明    2 1.1 查找顺序    2 1.1.1 检查DllCharacteristics字段    3 1.1.2 读取manifset资源    3 1.1.3 读取manifs ...

  7. JavaScript及C# URI编码详解

    转载自:http://www.cnblogs.com/artwl/archive/2012/03/07/2382848.html 应用Uri编码,可以把一个或多个Uri作为另一个Uri的参数(如果不用 ...

  8. CentOS安装vim

    VMware下CentOS安装成功后,默认自带vi,但vi功能没vim丰富.以下为CentOS中安装vim: 用yum产看源中的vim安装包: [xi@localhost ~]$ yum search ...

  9. JVM性能调优

    摘自:http://uule.iteye.com/blog/2114697 JVM垃圾回收与性能调优总结 JVM调优的几种策略 一.JVM内存模型及垃圾收集算法  1.根据Java虚拟机规范,JVM将 ...

  10. JSCore的基本使用

    一.简单介绍 JSCore全称为JavaScriptCore,是苹果公司在iOS中加入的一个新的framework.该framework为OC与JS代码相互操作的提供了极大的便利.该工程默认是没有导入 ...