js进阶课程ajax简介（ajax是浏览器来实现的）

一、总结

1、ajax使用需要服务器支持，比如phpstudy

2、ajax是浏览器支持的功能：ajax有个核心对象XMLHttpRequest，这个对象时浏览器提供支持的，是浏览器windows对象的一个对象，window.XMLHttpRequest

3、ajax兼容性问题：大部分浏览器都支持ajax，IE6不支持ajax的XMLHttpRequest对象，但是支持ajax的ActiveXObject对象

二、js进阶课程ajax简介

准备工作

配置本地服务器环境，这里推荐安装：phpstudy，优点：一次性安装，无须配置即可使用，非常方便

Ajax 简介

什么是 Ajax ？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

Ajax 的基本用法

  1. 创建 XMLHttpRequest 对象

    语法：var myAjax=new XMLHttpRequest();
    老版本的 IE（IE5 和 IE6）使用 ActiveX 对象：
    var myAjax=new ActiveXObject("Microsoft.XMLHTTP");

  2. 向服务器发送请求:使用open() 和 send() 方法：
    • open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
      1. method：请求的类型；GET 或 POST
      2. url：文件在服务器上的位置
      3. sync：true（异步）或 false（同步）
    • send(string):string：仅用于 POST 请求
  3. 服务器响应

    如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

    • responseText 属性:responseText 属性返回字符串形式的响应
    • responseXML 属性:如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性
  4. onreadystatechange 事件

    当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。

    • XMLHttpRequest 对象的三个重要的属性：
      1. onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
      2. readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
        1. 0: 请求未初始化
        2. 1: 服务器连接已建立
        3. 2: 请求已接收
        4. 3: 请求处理中
        5. 4: 请求已完成，且响应已就绪
      3. status:200: "OK"/404: 未找到页面

三、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>ajax01</title>

     <script src="ajax.js"></script>

 </head>

 <body>

     <input type="button" id="btn" value="测试按钮">

     <script>

     var btn=document.getElementById('btn')

     btn.onclick=function (){

         //1.创建Ajax对象

         var myajax=new XMLHttpRequest()

         alert(myajax) //IE6及其以下版本不支持

         /*

         if (window.XMLHttpRequest){ //1、XMLHttpRequest对象时浏览器的window对象下的一个对象

             var myajax=new XMLHttpRequest() //2、ajax向下兼容IE5和IE6的方法：选择结构

         }else{

             var myajax=new ActiveXObject("Microsoft.XMLHTTP"); //3、ajax向下兼容IE5和IE6的方法：ActiveXObject对象

         }

         */

     }

     </script>

 </body>

 </html>

js进阶课程ajax简介（ajax是浏览器来实现的）的更多相关文章

  1. js进阶 14 jquery的ajax有哪些函数和事件（多练）

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  2. js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

    js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化 一.总结 一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代 ...

  3. js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）

    js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...

  4. js进阶 14-1 jquery的ajax系列中的load方法的作用是什么

    js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...

  5. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  6. $Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互

    一.ajax  1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json  2 ajax干啥用的?前后端做数据交互:  3 之前学的跟后台做交互的方式:   -第一种:在浏览器 ...

  7. PHP AJAX 简介

    AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 是什么? AJAX = Asynchronous JavaScript and XML. AJAX ...

  8. js进阶解决浏览器缓存不能自动更新的问题（在ajax的url上带上一个参数，可以是日期，或者是随机数）（随机数Math.random）（取得日期的毫秒数：new Date().getTime();）

    js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();) ...

  9. js进阶ajax基本用法（创建对象，连接服务器，发送请求，获取服务器传过来的数据）

    js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...

随机推荐

  1. hdu1874 畅通project续 最短路 floyd或dijkstra或spfa

    Problem Description 某省自从实行了非常多年的畅通project计划后.最终修建了非常多路.只是路多了也不好,每次要从一个城镇到还有一个城镇时,都有很多种道路方案能够选择.而某些方案 ...

  2. JavaScript中的*top、*left、*width、*Height具体解释

    来源:http://www.ido321.com/911.html html代码 1: <body> 2: <div class="father" id=&quo ...

  3. 开发，从需求出发 &#183; 之三 春天在哪里

    <西游降魔>里面的<儿歌三百首>里面有首儿歌叫做<春天在哪里> 歌词是这种: 春天在哪里 春天在哪里 春天就在小朋友的眼睛里 通过俺的渣英语翻译之后是这种: whe ...

  4. 最值（min、max）与极值的理解

    max(a,b)=−min(−a,−b) 如果 a≥b ⇒ max(a,b)=a,−a≤−b,⇒ 同理 min(a,b)=−max(−a,−b) 1. 最值 最小:不能更少,如果是整数关系的话,也即从 ...

  5. 记阮一峰---JavaScript 标准参考教程之标准库-Object对象

    在看到阮大神的-标准库-Object对象时 有个 类型判断类型 方法可能以后会用到.特此记录一下 4.3:toString()的应用:判断数据类型 Object.prototype.toString方 ...

  6. eclipse git冲突解决

    1.工程->Team->同步: 2.从远程pull至本地,就会出现如下内容: 3.使用Merge Tool,执行第二项 4.再手动修改 4.修改后的文件需要添加到Git index中去: ...

  7. 安装Mysql最新版本mysql-5.7.10-winx64出现的几个问题解决

    电脑是64位的安装不了Windows (x86, 32-bit),Mysql installer MSI ,然后下载了Windows (x86, 32-bit), ZIP Archive 这种是免安装 ...

  8. 洛谷 P1755 斐波那契的拆分

    P1755 斐波那契的拆分 题目背景 无 题目描述 已知任意一个正整数都可以拆分为若干个斐波纳契数,现在,让你求出n的拆分方法 输入输出格式 输入格式: 一个数t,表示有t组数据 接下来t行,每行一个 ...

  9. 淘宝分类导航条；纯css实现固定导航栏

    效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  10. Android学习笔记之滑动翻页（屏幕切换）

    如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件—ViewFlipper 这个控件是 ...