玩转ajax
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的更多相关文章
- 后端程序员如何玩转AJAX
1.原生的Ajax入门 (感觉很是繁琐,所以一般我们都是用简单的方式) 创建一个核心对象 XMLHttpRequest var xmlhttp; if (window.XMLHttpRequest) ...
- javaWeb - 2 — ajax、json — 最后附：后台获取前端中的input type = "file"中的信息 — 更新完毕
1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...
- 第五章jQuery
DOM文档加载的步骤 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚本代码. DOM树构建完成. 加载图片等外部文件. 页面加载完毕. 执行时间不同 window.onload必须等到页 ...
- JQuery框架2.位置属性|筛选方法|事件
1.位置属性 jquery的css position获取匹配元素相对父元素的偏移位置:offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left $("p ...
- 玩转spring boot——ajax跨域
前言 java语言在多数时,会作为一个后端语言,为前端的php,node.js等提供API接口.前端通过ajax请求去调用java的API服务.今天以node.js为例,介绍两种跨域方式:Cross ...
- Shiro眼皮下玩ajax，玩出302 Found(实践得经验)
2017/06/14这一天,是我玩Shiro安全框架最刻骨铭心的一天.因为Shiro今天给我深深的补了一刀,在这儿我也给各位补一刀吧,其实问题很简单,解决方式也极其简单,只是给各位分享一下这个错误,纯 ...
- Shiro眼皮下玩ajax，玩出302 Found
2017/06/14这一天,是我玩Shiro安全框架最刻骨铭心的一天.因为Shiro今天给我深深的补了一刀,在这儿我也给各位补一刀吧,其实问题很简单,解决方式也极其简单,只是给各位分享一下这个错误,纯 ...
- 使用原生ajax访问后台数据并将其展现在前端页面中（小菜鸟自己整理玩的，大神勿喷）
首先你要有php的环境,关于php环境的搭建,php本地站点的搭建,此处不再重复请看这里:http://www.cnblogs.com/Gabriel-Wei/p/5950465.html我们把wam ...
- 玩转web之ajax(一)---使用表单的serialize()方法中文乱码解决
有时候我们需要使用ajax提交去提交form的值,这样就需要使用serialize()去获取form的值,但这样获取的值如果有中文,会乱码,原因和解决方法如下: 原因:.serialize()自动调用 ...
随机推荐
- Taurus.MVC 2.2 开源发布：WebAPI 功能增强（请求跨域及Json转换）
背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...
- 0.Win8.1，Win10，Windows Server 2012 安装 Net Framework 3.5
后期会在博客首发更新:http://dnt.dkill.net 网站部署之~Windows Server | 本地部署:http://www.cnblogs.com/dunitian/p/482280 ...
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- 前端学HTTP之日志记录
前面的话 几乎所有的服务器和代理都会记录下它们所处理的HTTP事务摘要.这么做出于一系列的原因:跟踪使用情况.安全性.计费.错误检测等等.本文将谥介绍日志记录 记录内容 大多数情况下,日志的记录出于两 ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- 读python源码--对象模型
学python的人都知道,python中一切皆是对象,如class生成的对象是对象,class本身也是对象,int是对象,str是对象,dict是对象....所以,我很好奇,python是怎样实现这些 ...
- Velocity初探小结--velocity使用语法详解
做java开发的朋友一般对JSP是比较熟悉的,大部分人第一次学习开发View层都是使用JSP来进行页面渲染的,我们都知道JSP是可以嵌入java代码的,在远古时代,java程序员甚至在一个jsp页面上 ...
- 免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）
前面介绍了六种.NET组件,其中有一种组件是写文件的压缩和解压,现在介绍另一种文件的解压缩组件SharpZipLib.在这个组件介绍系列中,只为简单的介绍组件的背景和简单的应用,读者在阅读时可以结合官 ...
- [修正] Firemonkey TFrame 存档后，下次载入某些事件连结会消失（但源码还在）
问题:Firemonkey TFrame 存档后,下次载入某些事件连结会消失(但源码还在) 解决:(暂时方法) type TTestFrame = class(TFrame) public const ...