原生态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服务器进行数据交换(用户不知道也感觉不出来,就跟桌面应用程序似的进行数据交互),它不会导 ...
一周排行
  • 处理发来的URL只是MVC中的一部分,我们也需要生成一些URL植入到我们的view中,让用户点击,并提交表单到目标controller和action,下面会介绍一些生成URL的技巧.最快速直接的定义外链URL的方法就 ...
  • <html><head><title>表单应用</title></head><body>   <form action="&qu ...
  • 数据库SQL优化大总结之 百万级数据库优化方案数据库连接(JOIN)的实现和性能
  •  如果既想获得 RHEL 的高质量.高性能.高可靠性,又需要方便易用(关键是免费)的软件包更新功能,那么 Fedora Project 推出的 EPEL(Extra Packages for Enterprise L ...
  • 系统文件检查器(sfc.exe) 是 Windows 内置的 工具,用于验证系统文件完整性并修复损坏的系统文件.绝大多数由 系统文件损坏造成的故障,如: 蓝屏.经常性死机.无法开机 均可通过运行sfc.exe 解决. ...
  • http://www.net130.com1.最基本,最常用的,测试物理网络的 ping 192.168.0.8 -t ,参数-t是等待用户去中断测试 2.查看DNS.IP.Mac等 A.Win98:winipcfg ...
  • 对于程序员或创业团队来说,还是有必要拥有一个属于自己的博客.Wordpress 曾经让个人或企业搭建博客变得非常容易.但是我们觉得 Wordpress 还是有些重量级,所以选择了一个非常轻便的工具 toto,一段只有 ...
  • 今天终于在centos下把Qt安装成功了,首先心情是非常激动的,然后说说说我安装qt的经历,记得第一次接触qt时是在思软培训嵌入式的时候,我所认为的qt是一款GUI编程软件,那会是在VM里装的Qt,也不是自己装的,这 ...
  • 1.安装eclipsesudo apt-get install eclipse 2.暗自中文语言包点击下载中文语言包(http://www.eclipse.org/downloads/download.php?fil ...
  • IOS之UICollectionViewController------------救赎之路
    UICollectionViewColltroller是IOS中用来展示数据集的视图,功能 ...