优点：减轻服务器的负担,按需取数据,最大程度的减少冗余请求
局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
基于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. struts标签小记

    1.<s:iterator>标签的  奇偶数行使用不同样式 <s:iterator id="list" value="#request.listq&qu ...

  2. String的replaceAll方法中的正则表达式用法

    项目里面 需要对已手机号码进行 如下的显示 比如15088688388 要显示为150****8388的效果 实现这个简单的效果 方法有很多 我想试试用正则表达式去实现 查了点资料最终试出来以下方法可 ...

  3. 学习OpenCV——粒子滤波（网上两篇文章总结）

    粒子滤波的理论实在是太美妙了,用一组不同权重的随机状态来逼近复杂的概率密度函数.其再非线性.非高斯系统中具有优良的特性.opencv给出了一个实现,但是没有给出范例,学习过程中发现网络上也找不到.le ...

  4. Leetcode: Kth Smallest Element in a Sorted Matrix

    Given a n x n matrix where each of the rows and columns are sorted in ascending order, find the kth ...

  5. VS的基本学习

    2016.4.11  下午 一.数据类型 1.基本数据类型 注:字节:例{10221021  8位数为一个字节    8b=1B} 1).整形(整数) ① short(比Int短   Int16){2 ...

  6. 转：python webdriver API 之浏览器多窗口处理

    有时候我们在测试一个 web 应用时会出现多个浏览器窗口的情况,在 selenium1.0 中这个问题比较难处理.webdriver 提供了相关相方法可以很轻松的在多个窗口之间切换并操作不同窗口上的元 ...

  7. [转] JAVA多线程和并发基础面试问答

    JAVA多线程和并发基础面试问答 原文链接:http://ifeve.com/java-multi-threading-concurrency-interview-questions-with-ans ...

  8. flot_js_$用法解释

    $用法解释 $在JS中本身只是一个符号而异,在JS里什么也不是.但在JS应用库JQUERY的作者将之做为一个自定义函数名了,这个函数是获取指定网页元素的函数,使用非常之频繁,所以好多新手不知道,还以为 ...

  9. paper 48： Latex中如何制作参考文献

    文章写到现在,最后一步就要大功告成了!reference,let's go! 一.用Google来做Latex的bib文件 1. 打开scholar.google.com 2. 定制   Schola ...

  10. 夺命雷公狗---Thinkphp----5之数据库的链接

    我们打开WEB目录下发现了Common和Home以及Runtime这三个文件夹 那么我们第一个目标是完成网站后台的首页吧,那么我们就直接将Home的文件夹复制一份出来,并且改名为Admin这样就可以分 ...