创建XMLHttpRequest对象

xmlHttp = new XMLHttpRequest();
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');//IE
 
XMLHttpRequest对象相关方法
打开请求
XMLHttpRequest.open(传递方式,地址,是否异步请求)
准备就绪执行
XMLHttpRequest.onreadystatechange
获取执行结果
XMLHttpRequest.responseText
 
上手小实践
 
//文件名 index.php
<script type="text/javascript" src="ajax.js"></script>
<a href="#" onclick="funphp100('o')">o</a>
<a href="#" onclick="funphp100('t')">t</a>
<a href="#" onclick="funphp100('x')">x</a>
<div id="php100"></div>
 
 
//文件名 for.php
<?php
 
if(@$id=$_GET['id']){
    for($i=1;$i<10;$i++){
        echo $id;
    }
    exit();
}
 
?>
 
//文件名 ajax.js
 
var xmlHttp;
function S_xmlhttprequest(){
    if(window.ActiveXObject){
        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }
}
 
function funphp100(url){
    S_xmlhttprequest();
    xmlHttp.open("GET","for.php?id="+url,true);
    xmlHttp.onreadystatechange=byphp;
    xmlHttp.send(null);
}
 
function byphp(){
    if (xmlHttp.readyState == 4){
    var byphp100=xmlHttp.responseText;
    document.getElementByIdx_x('php100').innerHTML=byphp100;
    }
}
==========================================================

AJAX+PHP用户名验证

index.php
 
<script type="text/javascript" src="ajax.js"></script>
  <form name="myform" action="" method="post" enctype="text/plain">
  用户名:
  <input type="text" name="user" value="" onblur="funphp100('php100')"/>
  <div id="php100"></div>
 
 
  </form>
 
for.php
<?php
if($_GET[id]){
sleep(1);
 $conn=mysql_connect('localhost','root','');
 mysql_select_db('test',$conn);
 
 $sql="SELECT * FROM `user` where `name`='$_GET[id]'";
 $q=mysql_query($sql);
 
 if(is_array(mysql_fetch_row($q))){
  echo "<font color=red>用户名已经存在</font>";
 }else
 {
   echo "<font color=green>可以使用</font>";
 }
}
?>
 
ajax.js
 
 
var xmlHttp;
function S_xmlhttprequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
 
function funphp100(name) {
 
   var f=document.myform.user.value;
S_xmlhttprequest();
xmlHttp.open("GET","for.php?id="+f,true);
xmlHttp.onreadystatechange = byphp;
xmlHttp.send(null);
}
 
function byphp() {
 
  if(xmlHttp.readyState == 1) {
document.getElementByIdx_x('php100').innerHTML = "<img src='loading.gif'>";
}
 
    if(xmlHttp.readyState == 4 ){
if(xmlHttp.status == 200) {
          var byphp100 =  xmlHttp.responseText;
          document.getElementByIdx_x('php100').innerHTML = byphp100;
}
}
 
 
}
=============================
Ajax+PHP打造等待进度条效果
方法XHR.readyState五种状态

XHR.readyState == 状态(0,1,2,3,4)
0:请求未初始化,还没有调用 open()。 
1:请求已经建立,但是还没有发送,还没有调用 send()。 
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 
3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成。
4:响应已完成;您可以获取并使用服务器的响应了。
 
方法XHR.status常见的几种状态
XHR.status == 200,300,404 等
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
 
200——成功
201——提示知道新文件的URL
 
300——请求的资源可在多处得到
301——删除请求数据
 
404——没有发现文件、查询或URl
500——服务器产生内部错误 
                                            index.php
 
<script type="text/javascript" src="ajax.js"></script>
 
 
<a href="#" onclick="funphp100('o')">o</a>
<a href="#" onclick="funphp100('t')">t</a>
<a href="#" onclick="funphp100('x')">x</a>
<br>
<div id="php100"></div>
 
for.php
<?php
 
  for($i=1;$i<=3;$i++){
  echo $i."$id<br>";
  sleep(1);
  }
 
 
?>
上节源文件ajax.js的修改
 
 
var xmlHttp;
function S_xmlhttprequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
 
function funphp100(url) {
S_xmlhttprequest();
xmlHttp.open("GET","for.php?id="+url,true);
xmlHttp.onreadystatechange = byphp;
xmlHttp.send(null);
}
 
function byphp() {
 
  if(xmlHttp.readyState == 1) {
document.getElementByIdx_x('php100').innerHTML = "loading....";
}
 
    if(xmlHttp.readyState == 4 ){
if(xmlHttp.status == 200) {
          var byphp100 =  xmlHttp.responseText;
          document.getElementByIdx_x('php100').innerHTML = byphp100;
}
}
 
 
}

AJAX快速上手的更多相关文章

  1. AJAX快速上手和基本核心

    一.快速上手AJAX 使用ajax的过程可以类比平常我们访问网页过程 1.创建一个XMLHttpRequest类型的对象------相当于打开了浏览器 var xhr = new XMLHttpReq ...

  2. 从零开始学 Web 之 Ajax(三)Ajax 概述,快速上手

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 如何快速上手一个新技术之vue学习经验

    碰到紧急项目挪别人的vue项目过来直接改,但是vue是18年初看过一遍,18年底再来用,早就忘到九霄云外了,结果丢脸的从打开vue开始学,虽然之前在有道云笔记做了很多记录,然后没有系统整理.所以借这次 ...

  4. React:快速上手(8)——前后端分离的跨域访问与会话保持

    React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...

  5. ajax快速入门

    一.ajax简单入门 1.Ajax的实现步骤 // 1.创建ajax对象var xhr = new XMLHttpRequest();// 2.高数ajax请求地址及请求方式//第一个参数就是请求方式 ...

  6. 【Python五篇慢慢弹】快速上手学python

    快速上手学python 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多 ...

  7. 快速上手Unity原生Json库

    现在新版的Unity(印象中是从5.3开始)已经提供了原生的Json库,以前一直使用LitJson,研究了一下Unity用的JsonUtility工具类的使用,发现使用还挺方便的,所以打算把项目中的J ...

  8. [译]:Xamarin.Android开发入门——Hello,Android Multiscreen快速上手

    原文链接:Hello, Android Multiscreen Quickstart. 译文链接:Hello,Android Multiscreen快速上手 本部分介绍利用Xamarin.Androi ...

  9. [译]:Xamarin.Android开发入门——Hello,Android快速上手

    返回索引目录 原文链接:Hello, Android_Quickstart. 译文链接:Xamarin.Android开发入门--Hello,Android快速上手 本部分介绍利用Xamarin开发A ...

随机推荐

  1. WM_CLOSE、WM_DESTROY、WM_QUIT的区别(询问,销毁窗口,退出进程,都不是一回事)

    1.发送消息SendMessage.PostMessage PostMessage将消息放入消息队列后马上返回,而SendMessage直到窗口过程处理完消息后才返回 2.三个消息的区别 WM_CLO ...

  2. 新发现:AirDroid(用Web端控制自己的手机发信息)

    http://web.airdroid.com/ 好多功能呀,有空研究研究 http://jingyan.baidu.com/article/b24f6c82cd4ade86bfe5daf3.html ...

  3. 格式化字符串format函数

    自python2.6开始,新增了一种格式化字符串的函数str.format(),可谓威力十足.那么,他跟之前的%型格式化字符串相比,有什么优越的存在呢?让我们来揭开它羞答答的面纱. 语法 它通过{}和 ...

  4. 20个Linux服务器性能调优技巧

    Linux是一种开源操作系统,它支持各种硬件平台,Linux服务器全球知名,它和Windows之间最主要的差异在于,Linux服务器默认情况下一般不提供GUI(图形用户界面),而是命令行界面,它的主要 ...

  5. Oracle Dataguard三种保护模式

    Oracle Dataguard提供了三种数据保护模式,在此分别总结一下三种数据保护模式的特点. 1.最大保护模式1)这种模式提供了最高级别的数据保护能力:2)要求至少一个物理备库收到重做日志后,主库 ...

  6. Jquery的hover方法让鼠标经过li时背景变色

    来源地址:http://itfish.net/article/29790.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  7. VB编写的验证码生成器

    验证码(CAPTCHA)是“Completely AutomatedPublicTuring test to tell Computers andHumansApart”(全自动区分计算机和人类的图灵 ...

  8. FLEX 图片拷贝

    在用FLEX做GIS相关的开发的时候,遇到一个问题.因为是监控类的系统,所以需要要求地图上的ICON的实时更新,从而会出现重复加载的情况.就是重复请求相同的图片用做背景,尤其是在加载的ICON较多的时 ...

  9. I have a dream

    1.金斧子 2.有利网 3.金融街

  10. 高仿“点触验证码”做的一个静态Html例子

    先上源码: <html> <head> <title>TouClick - Designed By MrChu</title> <meta htt ...