原生态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服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导 ...
一周排行
  • 2016年第一次系统更新:   1.新增[项目空间管理]-[空间变更]:通过流程处理空间类型.类型变更:   2.优化[基础设置]-[收费项目管理]:增加空间类型与费用类型的逻辑关系:   3.新增[固定收费项管理] ...
  • LYNC中文版安装详解-第二部分
    在第一部分中,我们配置了LYNC的前端和后端,已经实现了内部用户的访问.现在为了让外部用户 ...
  • 回到 目录 之所以写这篇文章,完全是因为这次代码审核,这次代码审核过程当中,出现了很多我认为基础知识不够扎实的问题,所以,打算把它们记录下来,共大家分享. 方法的override,即方法的覆写或者重写,有时还是习惯叫 ...
  • cacti监控h3c的设备
      H3C的CPU和内存没有公开,无法使用通用的OID找到其CPU和内存使用率.不过,H3 ...
  • 华为06年面试题(要求8分钟完成) 题目: 有两个数组a,b,大小都为n,数组元素的值任意,无序:要求: 通过交换a,b中的元素,使数组a元素的和与数组b元素的和之间的差最小. 代码: 1 #include < ...
  • 通过vftps和虚拟帐号增强ftp的安全性
    原理介绍:一.帐号登录:1.匿名帐号  anonymous 2.本地帐号  服务器本地的帐 ...
  • 25个最常用的iptables策略1,清空存在的策略当你开始创建新的策略,你可能想清除所有的默认策略,和存在的策略,可以这么做:iptables -F  或者iptables --flush 2,设置默认策略默认链策 ...
  • POJ2243考研路茫茫——单词情结
    又是AC自动机上用矩乘优化DP= = 其实和上一题基本一样...补集转化思想.. 只是要多 ...
  • linux启动故障分析
    当Linux启动不了我们应该怎么办 不管是新人还是老手,在学习和项目中都会遇到一些问题,对 ...
  • Ucenter源码解析之——index.php
    1:安装好ucenter之后,进入Ucenter,如果在浏览器地址栏上输入ucenter域 ...