[ajax 学习笔记] ajax初试
来源:互联网 发布:淘宝口罩 编辑:程序博客网 时间:2024/06/02 10:37
ajax全称是:asynchronous javasctipt and xml。
1.为什么需要ajax?
一般web程序与服务器的交互是:页面发送请求等待服务器处理,服务器处理数据,用户页面刷新整个页面,从而完成了一次交互。
如果用这种同步方式进行多次这种页面与服务器的交互,用户将会需要很多时间去等待服务器处理。
ajax异步处理的思想是:当页面发送请求后,交给服务器处理,服务器处理的同时,页面无须等待可以进行其他的操作,当服务器处理完成后,在当前页面显示结果,无须刷新整个页面。
2.ajax的简单实现
实现ajax需要用到javascript的XMLHttpRequest对象。
实现过程
1)创建对象(不同浏览器有不同的创建方法,一般需要考虑ie和非ie浏览器)
ie浏览器要用到ActiveXObject。
非ie浏览器可直接新建XMLHttpRequest对象实例。
2)发送请求。
发送请求前需要先建立一个与服务器的连接。它需要的参数有发送类型、连接的url、异步连接状态值等。
> 发送类型:GET/POST等。
> url:连接地址 + ? + 传送的值 (+ & + 传送的值..) [这里是用的get方式]
> 异步连接状态值:true / false。默认为true。true表示异步连接。
在发送请求前还要建立一个返回函数,它是用来指定服务器响应后要执行的内容。
发送请求。
3)服务器响应函数
3.一个简单实例
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script>//var xmlHttp = new XMLHttpRequest();/*创建XMLHttpRequest对象*/var xmlHttp = false;/*@cc_on @*/ //ie条件编译/*@if (@_javascript_version >= 5)try{xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}catch(e2){xmlHttp = false;}@end @*/if(!xmlHttp && typeof XMLHttpRequest != 'undefined'){xmlHttp = new XMLHttpRequest();}function callServer(){//获取name和password值var name = document.getElementById("name").value;var password = document.getElementById("password").value;//判断name和password是否为空if((name == "null") || (name == "")) return ;if(password == "null" || password == "") return ;//创建要连接的urlvar url = "check.php?name=" + escape(name) + "&password" + escape(password);//建立一个服务器的请求xmlHttp.open("GET", url, true);//创建服务器完成后运行的函数xmlHttp.onreadystatechange = updatePage;//发送请求xmlHttp.send(null);}function updatePage(){if(xmlHttp.readyState == 4){ //http就绪状态if(xmlHttp.status == 200){ //判断http状态代码var response = xmlHttp.responseText; //处理服务器响应document.getElementById("ajax-result").value = response;}else if(xmlHttp.status == 404){alert("Request url does not exist!");}else{alert("ERROR:status code is" + xmlHttp.status);}}}</script></head><body><div id="form"><form method="get">name:<input type="text" id="name" onchange="callServer()"/><br>passwiord:<input type="text" id="password" onchange="callServer()"><br>result:<input type="text" id="ajax-result"/></form></div></body></html>
0 0
- [ajax 学习笔记] ajax初试
- Ajax初试
- ajax初试
- ajax初试
- 初试ajax
- ajax学习笔记---什么是Ajax
- Ajax学习笔记-Ajax数据格式
- AJAX学习笔记--慕课网Ajax
- 初试Ajax.Net !
- 初试Ajax.Net !
- 初试Ajax.Net !
- 初试Ajax.Net !
- ajax提交数据初试
- ajax提交数据初试
- Ajax学习笔记(一)
- Ajax学习笔记(二)
- Ajax学习笔记(三)
- Ajax学习笔记(四)
- new MenuInfo
- C#中MessageBox用法大全(附效果图)
- 【Leetcode长征系列】Palindrome Number
- 算法9.13
- 贴片电阻的命名方法
- [ajax 学习笔记] ajax初试
- hdu1395 2^x mod n = 1
- ListView分组和字母导航,自定义Toast
- 从pfx提取密钥信息,并转换为key格式(pfx使用pkcs12模式补足)
- 关于 PHP Boolean 的细节
- Java程序导致服务死机的情况
- Apache Hadoop YARN: 背景及概述
- 从源代码剖析Mahout推荐引擎
- 5中单例模式比较