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. HTTP协议系列(1)

    一.为什么学习Http协议       首先明白我们为什么学习HTTP协议,也就是说明白HTTP协议的作用.HTTP协议是用于客户端与服务器之间的通讯.明白了HTTP协议的作用也就知道了为什么要学习H ...

  2. 微软发布正式版SQL Server 2016

    微软于今天在SQL 官方博客上宣布 SQL Server 数据库软件的正式发布版本(GA),历时一年多,微软为该软件发布了多个公共预览版和候选版本,而今天最终版本终于上线了.在博客中,微软数据集团的企 ...

  3. Ngrok让你的本地Web应用暴露在公网上

    1.Ngrok介绍 Ngrok是一个反向代理,通过在公共的端点和本地运行的Web服务器之间建立一个安全的通道.Ngrok可捕获和分析所有通道上的流量,便于后期分析和重放.简单来说,利用 Ngrok可以 ...

  4. ASP.NET Core的路由[5]：内联路由约束的检验

    当某个请求能够被成功路由的前提是它满足某个Route对象设置的路由规则,具体来说,当前请求的URL不仅需要满足路由模板体现的路径模式,请求还需要满足Route对象的所有约束.路由系统采用IRouteC ...

  5. jsp页面无法识别el表达式的解决方案

    今天在写一个springmvc的小demo时,碰到一个问题,在jsp页面中书写为${user.username}的表达式语言,在浏览器页面中仍然显示为${user.username},说明jsp根本不 ...

  6. CSS知识总结（九）

    CSS常用样式 10.自定义动画 1)关键帧(keyframes) 被称为关键帧,其类似于Flash中的关键帧. 在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“ ...

  7. 代码的坏味道（21）——中间人(Middle Man)

    坏味道--中间人(Middle Man) 特征 如果一个类的作用仅仅是指向另一个类的委托,为什么要存在呢? 问题原因 对象的基本特征之一就是封装:对外部世界隐藏其内部细节.封装往往伴随委托.但是人们可 ...

  8. Effective java笔记（二），所有对象的通用方法

    Object类的所有非final方法(equals.hashCode.toString.clone.finalize)都要遵守通用约定(general contract),否则其它依赖于这些约定的类( ...

  9. 通过自定义特性，使用EF6拦截器完成创建人、创建时间、更新人、更新时间的统一赋值(使用数据库服务器时间赋值，接上一篇)

    目录: 前言 设计(完成扩展) 实现效果 扩展设计方案 扩展后代码结构 集思广益(问题) 前言: 在上一篇文章我写了如何重建IDbCommandTreeInterceptor来实现创建人.创建时间.更 ...

  10. django 学习第一天搭建环境

    目前django版本是1.10,我学习的基础教材是 Web Development with Django Cookbook, Second Edition 搭建好配置环境 ssh免认证登录 修改一下 ...