AJAX

最新推荐文章于 2025-03-16 10:00:00 发布

__pop_

最新推荐文章于 2025-03-16 10:00:00 发布

阅读量645

点赞数

CC 4.0 BY-SA版权

分类专栏： linux-app 文章标签： AJAX

本文链接：https://blog.youkuaiyun.com/u011011827/article/details/56277806

linux-app 专栏收录该内容

15 篇文章

订阅专栏

参考文档

AJAX教程

网页前后端交互示例

ajax

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

Ajax 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。

AJAX与传统网页的不同

传递数据

传统网页传递的数据是整个页面的表单,而AJAX可以传递open第二个参数中?之后的部分,或者send中的部分.所以AJAX传递的数据相比来说会少很多,
刷新部分

传统网页会刷新整个页面,而AJAX实现了刷新局部
同步异步

传统网页与服务器的交互,都是同步.而AJAX(依靠XMLHttpRequest对象)实现了异步的方式传递数据,避免了阻塞.

而这些不同就是AJAX的优势所在.

AJAX实现流程

AJAX是通过XMLHttpRequest对象实现的.

流程是这样子的，你一旦触发事件(事件关联一个函数,函数可以任意指定)，然后就会执行事件指定的函数，函数中创建XMLHttpRequest对象,然后send到后台。在一定时间后，通过onreadystatechange指针指向的回调函数被执行来获取后台的数据，然后渲染（可以用document）当前页面。

html ->click->ajax(在html中体现为XMLHttpRequest对象)->php callback->modify html

AJAX与Jquery中的AJAX的区别

AJAX是一项技术,我们可以直接用javascript实现,需要写部分代码,直接操作XMLHttpRequest对象
Jquery中的AJAX已经被实现,直接调用就可以了,代码量要比我们自己实现要少.向我们隐藏了XMLHttpRequest对象.
要使用Jquery中的AJAX,可以包含这个文件
```
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
```
其他方面没有区别

前台示例

1/创建XMLHttpRequest对象

var xmlhttp; 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2/发送请求

open("method","path",ture);
send();
path可以是php的全路径,以及txt的全路径.亦可以是asp的路径及?A=1&B=2

3/获取响应

如果是同步的话,在send 之后就可以通过对象的responseText方法或者responseXML方法获取数据.
一帮情况下是异步的
如果是异步的话,可以用 onreadystatechange 指针指定一个函数.以便状态改变时调用这个函数.
然后在函数内判断是否就绪,然后读取服务器发回来的东西.
读到的东西有两种格式,一种是txt,一种是xml

后台示例

###1/接收

//前台相关代码
xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
//后台关键代码
char * data;
data = getenv("QUERY_STRING");//得到的data指向的字符串为"fname=Bill&lname=Gates"

注意:
	前台通过GET方法传参进后台就是通过环境变量QUERY_STRING来获取的

2/发送

//前台相关代码
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
//后台关键代码
printf("Content type: text/html\n\n");
printf("hello");
或者
cgiHeaderContentType ("text/html\n\n"); 
puts("hello");

注意:
	CGI通过IO流传入到服务器的字符串,字符串转发给浏览器端的xmlhttp.responseText

代码

前台代码

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get?fname=Bill&lname=Gates",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

后台代码(C代码)

//将这个文件编译为demo_get,并放到web_root中的ajax目录
#include <stdio.h>
#include <stdlib.h>

int main(int argc, const char *argv[])
{
	char * data;
	data = getenv("QUERY_STRING");
	printf("Content type: text/html\n\n");
	//cgiHeaderContentType是CGIC中的一个函数,如果要使用这个函数,编译的时候需要加上cgic.c(文件),在下载资源中有
	//cgiHeaderContentType("text/html\n\n");
	puts(data);
	return 0;
}//end of main