什么是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的基础应用的更多相关文章

  1. ajax技术基础详解

    一.概述 1.什么是ajax 可以与服务器进行[异步]交互的技术,浏览器无需刷新 2.什么时候出现ajax? -- XMLHttp 微软 1999年微软公司发布IE5版本,内嵌了ajax技术 什么时候 ...

  2. Ajax编程基础

    目录 Ajax编程基础 传统网站中存在的问题 Ajax概述 Ajax的应用场景 Ajax的运行环境 Ajax运行原理及实现 Ajax运行原理 Ajax的实现步骤 1.创建Ajax对象 2.告诉Ajax ...

  3. Ajax 学习 - 基础学习

    <AJax - Async Javascript and xml - 异步的JavaScript和XML> 一.基础认识 AJax技术的目的:实现页面无刷新数据动态更改 优点:  + 不需 ...

  4. Ajax之基础总结

    一.Ajax 简介 Ajax 由 HTML.JavaScript技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.在详细探讨 Ajax 是 ...

  5. Ajax——异步基础知识（一）

    基础概念 1.异步请求可以做到偷偷向服务器发送请求,而页面却不刷新 2.get异步请求传递参数是通过url追加键值对的方式 3.post异步请求比较特殊,需要设置请求的类型 User-Agent:浏览 ...

  6. Ajax之基础

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/liu_yujie2011com/article/details/29812777         几 ...

  7. Ajax全面基础学习（二）

    两种配置ajax的方式 $.ajax('url',{ 配置ajax}); $.ajax({ url : 'url' 其他ajax配置}) ajax的回调函数 $.ajax('url',{ //请求成功 ...

  8. Ajax全面基础学习（一）

    快捷方法: $.get(url,[data],[callback],[type])get方法的[data]将被链在url后面[callback]是请求成功后的回调,可以得到响应数据,如果请求失败,看不 ...

  9. 《所用到的AJAX技术基础》

    来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...

  10. ajax传输 基础一

    一个简单页面的传输 index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

随机推荐

  1. An error report file with more information is saved as hs_err_pid2756.log

    An error report file with more information is saved as hs_err_pid2756.log weblogic启服务时遇到的问题,重新部署都不行, ...

  2. GPU编程自学4 —— CUDA核函数运行参数

    深度学习的兴起,使得多线程以及GPU编程逐渐成为算法工程师无法规避的问题.这里主要记录自己的GPU自学历程. 目录 <GPU编程自学1 -- 引言> <GPU编程自学2 -- CUD ...

  3. iOS runloop 自定义输入源

    创建自定义输入源需要定义以下内容 1)输入源要处理的信息 2)使感兴趣的客户端知道如何和输入源交互的调度例程 3)处理其他任何客户发送请求的例程 4)使输入源失效的取消例程 上图的处理流程:主线程(M ...

  4. scrapy与scrapyd安装

    Scrapy是用python编写的爬虫程序. Scrapyd是一个部署与运行scrapy爬虫的应用,提供JSON API的调用方式来部署与控制爬虫 . 本文验证在fedora与centos是安装成功. ...

  5. PRML-Chapter3 Linear Models for Regression

    Example: Polynomial Curve Fitting The goal of regression is to predict the value of one or more cont ...

  6. BZOJ5280: [Usaco2018 Open]Milking Order（二分+拓扑）

    5280: [Usaco2018 Open]Milking Order Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 123  Solved: 62[ ...

  7. 51Nod 1439：互质对（用莫比乌斯来容斥）

    有n个数字,a11,a22,…,ann.有一个集合,刚开始集合为空.然后有一种操作每次向集合中加入一个数字或者删除一个数字.每次操作给出一个下标x(1 ≤ x ≤ n),如果axx已经在集合中,那么就 ...

  8. Linux shell字符串截取与拼接

    一 Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.linuxidc.com/123.htm 1  # 号截取,删除左边字符,保留右边字符. echo ${va ...

  9. 自动将 NuGet 包的引用方式从 packages.config 升级为 PackageReference

    在前段时间我写了一篇迁移 csproj 格式的博客 将 WPF.UWP 以及其他各种类型的旧样式的 csproj 文件迁移成新样式的 csproj 文件,不过全过程是手工进行的,而且到最后处理 XAM ...

  10. Hexo+GitHub+Netlify一站式搭建属于自己的博客网站

    喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处. 更好的阅读体验请点击查看:Hexo+GitHub+Netlify一站式搭建属于自己的博客 ...