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. Python标准模块--Unicode

    1 模块简介 Python 3中最大的变化之一就是删除了Unicode类型.在Python 2中,有str类型和unicode类型,例如, Python 2.7.6 (default, Oct 26 ...

  2. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. Android Button的基本使用

    title: Android Button的基本使用 tags: Button,按钮 --- Button介绍: Button(按钮)继承自TextView,在Android开发中,Button是常用 ...

  4. bzoj1079--记忆化搜索

    题目大意:有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci个木块.所有油漆刚好足够涂满所有木块,即c1+c2+...+ck=n.相邻两个木块涂相同色显得 ...

  5. Angular2 Hello World 之 2.0

    最近angular2正式版发布了,现在就趁热接着记录一下2.0版的Hello World.据说由RC6升级到2.0代码改动不是很大,在写的时候也感觉改动不是很大,这次记录还是以asp.net core ...

  6. Atitit.技术管理者要不要自己做开发？？

    Atitit.技术管理者要不要自己做开发?? 1. 为什么很多管理者不能自己亲自做了1 1.1. 沟通成本多了1 1.2. .组织分散. 1 1.3. 会议多 .协调多 1 1.4. 问题的根源在于我 ...

  7. Linux基础介绍【第三篇】

    更改SSH服务端远程登录的配置 windows服务端的默认远程管理端口是3389,管理员用户是administrator,普通用户是guest.Linux的管理用户是root,普通用户默认有很多个,远 ...

  8. Markdown学习笔记

    分为两步: 1.阅读Markdown中文官网的文档 2.下载MarkdownPad2将中文官网中文档的例子敲一遍,其中Markdownpad2为官网中推荐的编辑器 备注: 如果只看中文官网文档,不边看 ...

  9. [Xamarin] 透過Native Code呼叫 JavaScript function （转帖）

    今天我們來聊聊關於如何使用WebView 中的Javascript 來呼叫 Native Code 的部分 首先,你得先來看看這篇[Xamarin] 使用Webview 來做APP因為這篇文章至少講解 ...

  10. [开源]QuickSwitchSVNClient，快速完成SVN Switch的工具

    在实际的开发中,我们一般使用SVN工具进行源代码的管理.在实际的产品开发中,根据项目的一些定制要求,往往需要对某一些代码的修改,但是又不想影响主要的开发,这个时候需要对当前的主分支做一些分支处理(br ...