原生态JS操作ajax(二)——操作html

ajax基础信息前面都已经介绍过了。这个就略过。

使用原生js操作ajax的话还是比较容易的,跟前面的一篇内容基本差不多。

使用步骤:

一、创建对象 XMLHTTPRequest/ActiveOBject

二、发送请求 open()、send()

三、服务器响应 responseText(onreadystatechange、readyState、status)

步骤大体就分为这三个。

创建对象

 var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else{
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

如果是ie5、ie6的浏览器是不支持 XMLHttpRequest()这个对象的,需要用ActiveXObject()这个对象来实现。

上面的window.XMLHTTPRequest判断浏览器是否支持XMLHttpRequest()这个功能,如果支持就创建对象不支持则创建ActiveXObject对象。

发送请求

使用open()方法来创建请求,里面有两个参数,第一个参数是用什么方式来请求,一般常用的get post两种,第二个参数就是要请求的url地址。

用send()方法来发送参数,如果请求的地址不带参数则填null。

xmlHttp.open("GET","ceshi.php");
xmlHttp.send(null);

这儿访问的是本地的ceshi.php,这个不管哪种编程语言,只要是能开发web的编程语言都可以实现。

服务器响

使用responseText来接收服务器响应

xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200 || xmlHttp.status==304){
            alert(xmlHttp.responseText);                   
        }
    }
}

第一个判断 onreadystatechange 当请求被发送到服务器时,需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState是指存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

以下就是readyState存储的值。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

所以在上面判断readyState是否等于4 如果等于4的话就代表响应已经完成。

status这个是一个状态值判断200或者304是请求处于正常状态。

常用status状态值有 200(正常) 403(找不到页面) 500(服务器异常)。

至此前台的程序已经完毕。

接下来需要在程序文件 ceshi.php文件里面创建内容,这儿只做个简单的演示内容

ceshi.php

<?php
	echo "<p>ceshi</p>"
?>

上面只是用aler打印出来。如果要放到网页页面上,就需要大家学习DOM的内容了。

更多相关文章
  • ajax相信大家都不陌生,不过现在大家基本都是用jQuery来实现ajax,因为jQuery已经封装好了,比较简单,大家学起来容易,而且大多公司基本都用.有人可能觉得既然jQuery那么简单,干嘛要用原生js来实现了,多麻烦的.不过个人觉得虽然原生js实现有点麻烦,但是学会了也并没有坏处.原生态js ...
  • js/json 数组的操作 http://blog.sina.com.cn/s/blog_4d0309640101iset.html 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建 ...
  • js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var LG=(function(lg){ var objURL=function(url){ this.o ...
  • JS与PHP数组操作的不同
    JS与PHP数组操作的不同 1.JS 中向数组中添加元素,必须指定下标 2.php中向数组中添加元素,可以不指定下标(追加) 3.JS 中数组元素的下标,是连续 4.PHP中数组元素的下标,可以不连续 5.JS中数组的长度是最大下标加1,数组名.length                 人吃饭 ...
  • 在nodeJS中操作文件系统(二)
    在nodeJS中操作文件系统(二)   1. 移动文件或目录     在fs模块中,可以使用rename方法移动文件或目录,使用方法如下:     fs.rename(oldPath,newPath,callback); 在rename方法中,有三个参数,oldPath参数用于指定被移动文件或目录的 ...
  • 上一次我们练习了基本的文件系统操作方法,包括创建.复制.移动(剪切).重命名.删除文件和目录的方法,非常常用.本次我们继续来探讨文件系统,本次来关注一下这些命令:Get-ChildItemAdd-ContentClear-ContentGet-ContentSet-ContentOut-FileSe ...
  • 原生js写ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: 下面简单封装一个函数,之后稍作解释 ajax({ url: " ...
  • 浅谈JS之AJAX
    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导 ...
一周排行
  • 用户注册登录测试版jsp+servlet+mysql
    总体内容不算复杂,主要是利用jsp+servlet+mysql去实现web端的注册/登录/ ...
  • #include <stdio.h> int main() { int ch = 0; while ((ch = getchar()) != EOF) /*ctrl+z,是把输入的字符逐字读取到ch, 直 ...
  • 在mysql中,会存在匿名用户,新装mysql的时候,注意匿名用户需要进行删除.查看匿名用户:mysql> select current_user;+--------------+| current_user  ...
  • Hadoop1.2完全分布式安装与配置
    一.Hadoop介绍Hadoop是一个能够对大量数据进行分布式处理的软件框架.但是 Had ...
  • 此文是转载的,我看到时已被多方转载,不知道首发地,故未附上原文出处. 最近看到一个BBS上有人冷嘲热讽现在的CCNA跟看门的大妈一样月薪不可能超过一千了.先不说这样说法对人的不尊重,大妈又怎么啦?人只要不偷不抢不犯法 ...
  • from: http://dev.csdn.net/article/60/60902.shtmmeta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</h ...
  • 项目基本架构:ExtAspNet+.netTier信息管理系统,数据库sql2000(客户要求).开发使用的是ExtAspNet做前端展示,数据层使用.netTier问题点:更新数据库表结构后重新生成.netTier ...
  • <script type="text/javascript"> var strtime = new Date().getTime(); $(function(){ var end1 = ...
  • 从腾讯上市之时,腾讯的战略就全面展开:只要是和互联网相关的业务,就在腾讯的业务范畴之内.从战略设计的角度来看,纵观业界,如此大气的布局,目前也只有腾讯做得出来.但另外一方面,在战术选择上腾讯其实非常谨慎和保守,绝不轻 ...
  •         路由器实验:router> enable 从用户模式进入特权模式router# disable or exit 从特权模式退出到用户模式router# show sessions 查看本机上的T ...