Ajax的基础应用
什么是ajax
Ajax: asynchronous javascript and xml (异步js和xml)
其是可以与服务器进行(异步/同步)交互的技术之一。
ajax的语言载体是javascript。
最大特点:页面不刷新就可以更替网页的局部内容。

ajax的使用步骤
下面我们用简单的实例介绍ajax的应用
我们建立2个文件 分别是
one.html 和 one.php

one.html的代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body> </body>
</html>
<script> //1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.接收后台数据
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//4在这里标识的是一种状态
var str =xhr.responseText;
alert(str);//弹窗显示后台传递的信息
}
}
//3.发起请求
//get的传值
//xhr.open("get","one.php?uid=123&pwd=123"); xhr.open("post","one.php");
//传递方式 后台地址 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//设置请求头部格式(把传递的数据组织为xml格式)
var zhi="uid=123&pwd=456";//html页面向后台传递的值
//4.发送数据
xhr.send(zhi); </script>
one.php的代码如下:
<?php
echo "lemon";
?>
效果展示

这时F12就可以弹窗里看到后台返回的数据
还可以看到我们传到后台的数据

Ajax的基础应用的更多相关文章
- ajax技术基础详解
一.概述 1.什么是ajax 可以与服务器进行[异步]交互的技术,浏览器无需刷新 2.什么时候出现ajax? -- XMLHttp 微软 1999年微软公司发布IE5版本,内嵌了ajax技术 什么时候 ...
- Ajax编程基础
目录 Ajax编程基础 传统网站中存在的问题 Ajax概述 Ajax的应用场景 Ajax的运行环境 Ajax运行原理及实现 Ajax运行原理 Ajax的实现步骤 1.创建Ajax对象 2.告诉Ajax ...
- Ajax 学习 - 基础学习
<AJax - Async Javascript and xml - 异步的JavaScript和XML> 一.基础认识 AJax技术的目的:实现页面无刷新数据动态更改 优点: + 不需 ...
- Ajax之基础总结
一.Ajax 简介 Ajax 由 HTML.JavaScript技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.在详细探讨 Ajax 是 ...
- Ajax——异步基础知识(一)
基础概念 1.异步请求可以做到偷偷向服务器发送请求,而页面却不刷新 2.get异步请求传递参数是通过url追加键值对的方式 3.post异步请求比较特殊,需要设置请求的类型 User-Agent:浏览 ...
- Ajax之基础
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/liu_yujie2011com/article/details/29812777 几 ...
- Ajax全面基础学习(二)
两种配置ajax的方式 $.ajax('url',{ 配置ajax}); $.ajax({ url : 'url' 其他ajax配置}) ajax的回调函数 $.ajax('url',{ //请求成功 ...
- Ajax全面基础学习(一)
快捷方法: $.get(url,[data],[callback],[type])get方法的[data]将被链在url后面[callback]是请求成功后的回调,可以得到响应数据,如果请求失败,看不 ...
- 《所用到的AJAX技术基础》
来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...
- ajax传输 基础一
一个简单页面的传输 index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
随机推荐
- 设计 react 组件
重新设计 React 组件库 诚身 7 个月前 在 react + redux 已经成为大部分前端项目底层架构的今天, 让我们再次回到软件工程界一个永恒问题的探讨上来, 那就是如何提升一个开发团队 ...
- 深度学习(六十九)darknet 实现实验 Compressing Deep Neural Networks with Pruning, Trained Quantization and Huffma
本文主要实验文献文献<Deep Compression: Compressing Deep Neural Networks with Pruning, Trained Quantization ...
- 白话machine learning之Loss Function
转载自:http://eletva.com/tower/?p=186 有关Loss Function(LF),只想说,终于写了 一.Loss Function 什么是Loss Function?wik ...
- vim简单的文本编辑命令
<blockquote>:e! enter</blockquote>消除所有这次编辑的,回到原来文件的样子.不过此文件还是打开状态.<blockquote>:q! ...
- Linux文件传输scp和rsync断点续传
scp 是通过ssh协议传输数据,如果是想传输一个很大的数据,这几天我就遇到过,一个tar包,400G左右,通过scp拷贝时,有可能遇到服务器断电什么的悲剧问题,那么类似scp拷贝的另一个命令 rsy ...
- iOS UIWebView 中 js调用OC 打开相册 获取图片, OC调用js 将图片加载到html上
线上html <!DOCTYPE html> <html> <head> <title>HTML中用JS调用OC方法</title> < ...
- 部署经验Docker
从Docker 到Jenkins 到Ansible的部署经验 https://www.cnblogs.com/itdragon/p/10011816.html 工作中,除了开发功能,还负责系统的部署工 ...
- ssh连接至Ubuntu服务器时,提示以下错误:REMOTE HOST IDENTIFICATION HAS CHANGED!
今天在使用Ubuntu搭建自己的git仓库的时候,搭建完成后clone时出现以下错误 经过搜索问题出现原因的描述如下:第一次使用SSH连接时,会生成一个认证,储存在客户端的known_hosts中. ...
- WPF 使用MahApps.Metro UI库
在WPF中要想使用Metro风格是很简单的,可以自己画嘛.. 但是为了节省时间,哈,今天给大家推荐一款国外Metro风格的控件库. 本文只起到抛砖引玉的作用,有兴趣还是推荐大家上官网,Thanks,官 ...
- REX-Ray 了解
REX-Ray 是一个 EMC {code} 团队领导的开源项目,为 Docker.Mesos 及其他容器运行环境提供持续的存储访问.其设计旨在囊括通用存储.虚拟化和云平台,提供高级的存储功能. 当前 ...