1.什么是ajax？

　　Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。

2.ajax需要什么基础?

　　HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 
     JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。

3.Ajax的请求步骤

 　　3.1 创建一个对象XMLHttpRequest对象
　　3.2设置回调onreadystatechange方法
　　判断成功  status=200 readyStates = 4
　　3.3 设置open
　　第一个参数 GET或者POST
　　第二个参数 Url
　　第三个参数 true(异步) false(同步)
　　3.4 发送请求send方法 GET形式send方法没有参数
　　POST形式send方法有参数   参数的形式 键=值&键=值
　　3.5 POST请求 需要设置hdader
　　setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4.html代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>ajax</title>

 </head>

 <body>

     <h1>Ajax请求</h1>

     <hr>

     <button onclick='sendAjax()'>sendAjax</button>

     <script>

         function sendAjax(){

             //创建一个xhr对象

             if(window.XMLHttpRequest){

                 var xhr = new XMLHttpRequest();

             }

             else {

                 var xhr = new ActiveXObject('Microsoft.XMLHTTP');

             }

             console.log('initital',xhr.readyState);

             // 当状态发送改变 回调这个函数

             xhr.onreadystatechange = function(){

                 console.log(xhr.readyState);

                 if(xhr.readyState==4 && xhr.status==200){

                     // 输出响应的文本对象

                     console.log(xhr.responseText);

                 }

             }

             //发送请求

             xhr.open('GET','01.php',true);

             // xhr.open('GET','01.php',false);

             // xhr.open('GET','01.php');

             console.log("open",xhr.readyState);

             xhr.send();//异步请求 在这时间点 分线程走

             console.log('send',xhr.readyState)

         }

     </script>

 </body>

 </html>

5.php代码

<?php // sleep(5); echo "hellow world"; ?>

6.点击F12或者Ctrl+shift+I检查元素，然后触发点击事件，看到的效果图

　　

玩转ajax的更多相关文章

  1. 后端程序员如何玩转AJAX

    1.原生的Ajax入门 (感觉很是繁琐,所以一般我们都是用简单的方式) 创建一个核心对象 XMLHttpRequest var xmlhttp; if (window.XMLHttpRequest) ...

  2. javaWeb - 2 — ajax、json — 最后附：后台获取前端中的input type = "file"中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  3. 第五章jQuery

    DOM文档加载的步骤 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚本代码. DOM树构建完成. 加载图片等外部文件. 页面加载完毕. 执行时间不同 window.onload必须等到页 ...

  4. JQuery框架2.位置属性|筛选方法|事件

    1.位置属性 jquery的css position获取匹配元素相对父元素的偏移位置:offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left $("p ...

  5. 玩转spring boot——ajax跨域

    前言  java语言在多数时,会作为一个后端语言,为前端的php,node.js等提供API接口.前端通过ajax请求去调用java的API服务.今天以node.js为例,介绍两种跨域方式:Cross ...

  6. Shiro眼皮下玩ajax，玩出302 Found(实践得经验)

    2017/06/14这一天,是我玩Shiro安全框架最刻骨铭心的一天.因为Shiro今天给我深深的补了一刀,在这儿我也给各位补一刀吧,其实问题很简单,解决方式也极其简单,只是给各位分享一下这个错误,纯 ...

  7. Shiro眼皮下玩ajax，玩出302 Found

    2017/06/14这一天,是我玩Shiro安全框架最刻骨铭心的一天.因为Shiro今天给我深深的补了一刀,在这儿我也给各位补一刀吧,其实问题很简单,解决方式也极其简单,只是给各位分享一下这个错误,纯 ...

  8. 使用原生ajax访问后台数据并将其展现在前端页面中（小菜鸟自己整理玩的，大神勿喷）

    首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wam ...

  9. 玩转web之ajax(一)---使用表单的serialize()方法中文乱码解决

    有时候我们需要使用ajax提交去提交form的值,这样就需要使用serialize()去获取form的值,但这样获取的值如果有中文,会乱码,原因和解决方法如下: 原因:.serialize()自动调用 ...

随机推荐

  1. C++内存对齐总结

    大家都知道,C++空类的内存大小为1字节,为了保证其对象拥有彼此独立的内存地址.非空类的大小与类中非静态成员变量和虚函数表的多少有关. 而值得注意的是,类中非静态成员变量的大小与编译器内存对齐的设置有 ...

  2. 分布式锁1 Java常用技术方案

    前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题,那么就要利用分布式锁来解决这些问题.所以自己结合实际工作中的一些经验和网上看到的一些资 ...

  3. 02.LoT.UI 前后台通用框架分解系列之——灵活的菜单栏

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. const,static,extern 简介

    const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...

  5. 【C#代码实战】群蚁算法理论与实践全攻略——旅行商等路径优化问题的新方法

    若干年前读研的时候,学院有一个教授,专门做群蚁算法的,很厉害,偶尔了解了一点点.感觉也是生物智能的一个体现,和遗传算法.神经网络有异曲同工之妙.只不过当时没有实际需求学习,所以没去研究.最近有一个这样 ...

  6. Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

    前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...

  7. 谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. Hawk 4.7 单步调试

    单步调试的意义 已经编写的工作流,可能会因为某些外界环境的变化而出错,此时需要排除错误,我们可以使用单步调试. 单步调试的本质,相当于只使用前n个模块,这样就能看到每个步骤下,流的改变. 例子 还是上 ...

  9. DBA成长路线

    从开发转为数据库管理,即人们称为DBA的已经有好几年,有了与当初不一样的体会.数据是企业的血液,数据是石油,数据是一切大数据.云计算的基础.作为DBA是数据的保卫者.管理者,是企业非常重要的角色.对于 ...

  10. Java多态性——分派

    一.基本概念 Java是一门面向对象的程序设计语言,因为Java具备面向对象的三个基本特征:封装.继承和多态.这三个特征并不是各自独立的,从一定角度上看,封装和继承几乎都是为多态而准备的.多态性主要体 ...