优点：减轻服务器的负担,按需取数据,最大程度的减少冗余请求
局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
基于xml标准化,并被广泛支持,不需安装插件等
进一步促进页面和数据的分离
缺点：AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
AJAX只是局部刷新,所以页面的后退按钮是没有用的.
对流媒体还有移动设备的支持不是太好等

实例化ajax


  //实例化对象

var xmlhttp=null;

if(window.XMLHttpRequest)

{

   xmlhttp=new XMLHttpRequest();

}else{

   xmlhttp=ActiveXObject("Mircrosoft.XMLHTTP");    //浏览器是否支持 XMLHttpRequest 对象

}

//向服务器发送请求

xmlhttp.open("请求的类型get或post","文件在的服务器上位置","true异步或false同步");
xmlhttp.send();//将请求发送到 服务器上

setRequestHeader("头名称","规定头的值");

//服务器响应
responseText(); //获取字符串形式的响应数序
responseXML(); //获取XML形式的响应数据

onreadystatechange事件
//当请求发送到服务器的时候，我们需要执行

XMLHttpRequest的三个重要属性
onreadystatechange 存储函数，每当readyState属性改变时，就会调用该函数
readystate  XMLHttpRequest的状态
0为请求未初始化
1服务器连接已建立
2 请求已接收
3 请求处理中
4 请求已完成,且响应已就绪

status 200 “OK”  404 未找到页面

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

　

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

</head>

<body>

    <form  entype="multipart/form-data" name="aax">

    	<table border="0" width="300">

    		<tr>

    			<td>名称</td>

    			<td><input type="text" name=name /></td>

    		</tr>

    		<tr>

    			<td>类型</td>

    			<td>

    			<select name="s">

    				<option value="1">服装</option>

    				<option value="2">视频</option>

    				<option value="3">汽车</option>

    			</select>

    			</td>

    		</tr>

    		<tr>

					<td align="right">单价：</td>

					<td><input type="text" name="price"/></td>

				</tr>

				<tr>

					<td align="right">库存：</td>

					<td><input type="text" name="total"/></td>

				</tr>

				<tr>

					<td align="right">图片：</td>

					<td><input type="file" name="pic"/></td>

				</tr>

				<tr>

					<td align="right" valign="top">描述：</td>

					<td><textarea rows="5" cols="20" name="note"></textarea></td>

				</tr>

				<tr>

					<td colspan="2" align="center">

						<input type="submit" onclick="ajax();"  value="添加"/>   

						<input type="reset" value="重置"/>

					</td>

				</tr>

    	</table>

    </form>

    <script>

function ajax()
{
var f=document.aax;
var name=f.name.value;
var typeid=f.s.value;
var pic=f.pic.value;
var price=f.price.value;
var note=f.note.value;

var xmlhttp=null;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}else{

xmlhttp=ActiveXObject("Microsoft.XMLHTTP");
}
var lian="name="+name+"&typeid="+typeid+"&pic="+pic+"&price="+price+"&note="+note;
$xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.open("get","addcas.php",true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{

document.getElementById("sed").innerHTML=$xmlhttp.responeseText;
}
};

}

    </script>

</body>

</html>

　　

PHP和ajax详解的更多相关文章

  1. $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解

    [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...

  2. Ajax详解及使用Ajax时的返回值类型有哪些？

    Ajax详解 Ajax = 异步 JavaScript 和 XML. Ajax 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在 ...

  3. $.ajax()详解

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  4. jQuery中$.ajax()详解(转)

    JQuery中$.ajax()方法参数详解     url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get) ...

  5. Ajax详解

    一:什么是Ajax AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法 ...

  6. AJAX 详解注释很全来自互联网

    1: //用户名校验的方法 2: //这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互 3: var xmlhttp; 4: function verify(){ 5: //1. ...

  7. jquery ajax详解

    详细参数列表url:发送请求的连接地址type:请求方式 get:获取 post:发送 put和deletetimeout:设置请求超时时间async:默认true为异步请求,false同步请求锁住浏 ...

  8. Validform使用ajax详解

    demo.config({    showAllError:true,    url:"这里指定提交地址",    ajaxpost:{        //可以传入$.ajax() ...

  9. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  10. Ajax详解及其案例分析------如何获得Ajax对象，使用Ajax对象发送GET和POST请求，校验用户名，POST和GET请求时的乱码处理，实现级联的下拉列表

    本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...

随机推荐

  1. jquery获取自身元素的html

    在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML" ...

  2. 网易免费邮件开启smtp教程

    网易免费邮件开启smtp教程     作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 我们在部署zabbix邮件报警中可能会用到163.com.那么我们如何去开启smtp服务呢? 1 ...

  3. [transferred] javascript exception handling.

    my error handling clause: window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumb ...

  4. SpringMvc：处理模型数据

    SpringMvc提供了以下途径输出模型数据: -ModelAndView:处理方法返回值类型为ModelAndView,方法体即可通过该对象添加模型数据 -Map或Model:入参为org.spri ...

  5. HDU 3691 Nubulsa Expo（全局最小割Stoer-Wagner算法）

    Problem Description You may not hear about Nubulsa, an island country on the Pacific Ocean. Nubulsa ...

  6. Openssl生成根证书、服务器证书并签核证书

    1.修改Openssl配置文件CA目录: cat /etc/pki/tls/openssl.cnf dir = /etc/pki/CA 2.生成根证书及私钥: #http://www.haiyun.m ...

  7. paper 6：支持向量机系列三：Kernel —— 介绍核方法，并由此将支持向量机推广到非线性的情况。

    前面我们介绍了线性情况下的支持向量机,它通过寻找一个线性的超平面来达到对数据进行分类的目的.不过,由于是线性方法,所以对非线性的数据就没有办法处理了.例如图中的两类数据,分别分布为两个圆圈的形状,不论 ...

  8. 《zw版·Halcon-delphi系列原创教程》 水果自动分类脚本（机器学习、人工智能）

    <zw版·Halcon-delphi系列原创教程> 水果自动分类脚本(机器学习.人工智能) 前面介绍了超市,流水线,酸奶的自动分类算法,下面再介绍一个水果的自动分类算法. Halcon强大 ...

  9. php防止刷新(流量攻击)的一段代码

    <?php//查询禁止IP$ip =$_SERVER['REMOTE_ADDR'];$fileht=".htaccess2";if(!file_exists($fileht) ...

  10. Android_adb详解

    adb定义:adb(android debug bridge)是android系统中的一种命令行工具,通过它可以和android设备或模拟器通信. adb工具位置: <path-to-sdk&g ...