1.创建XMLHttpRequest对象

function createXMLHTTPRequest() {
//1.创建XMLHttpRequest对象
//这是XMLHttpReuquest对象无部使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
var xmlHttpRequest;
if (window.XMLHttpRequest) {
//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlHttpRequest = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (xmlHttpRequest.overrideMimeType) {
xmlHttpRequest.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6,IE5.5,IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
//排在前面的版本较新
var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
for ( var i = 0; i < activexName.length; i++) {
try {
//取出一个控件名进行创建,如果创建成功就终止循环
//如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
xmlHttpRequest = new ActiveXObject(activexName[i]);
if(xmlHttpRequest){
break;
}
} catch (e) {
}
}
}
return xmlHttpRequest;
}

2.get请求

function get(){
var req = createXMLHTTPRequest();
if(req){
req.open("GET", "http://test.com/?keywords=手机", true);
req.onreadystatechange = function(){
if(req.readyState == 4){
if(req.status == 200){
alert("success");
}else{
alert("error");
}
}
}
req.send(null);
}
}

3.post请求

 function post(){
var req = createXMLHTTPRequest();
if(req){
req.open("POST", "http://test.com/", true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");
req.send("keywords=手机");
req.onreadystatechange = function(){
if(req.readyState == 4){
if(req.status == 200){
alert("success");
}else{
alert("error");
}
}
}
}
}

post请求需要设置请求头

4.    readyState与status:

readyState有五种状态:

  0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
  1 (载入):已经调用open() 方法,但尚未发送请求;
  2 (载入完成): 请求已经发送完成;
  3 (交互):可以接收到部分响应数据;
  4 (完成):已经接收到了全部数据,并且连接已经关闭。
如此一来,你应该就能明白readyState的功能,而status实际是一种辅状态判断,只是status更多是服务器方的状态判断。关于status,由于它的状态有几十种,我只列出平时常用的几种:
  100——客户必须继续发出请求
  101——客户要求服务器根据请求转换HTTP协议版本
  200——成功
  201——提示知道新文件的URL
  300——请求的资源可在多处得到
  301——删除请求数据
  404——没有发现文件、查询或URl
  500——服务器产生内部错误

  

(转)原生ajax的写法的更多相关文章

  1. ASP.NET学习笔记(5)——原生Ajax基本操作

    说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...

  2. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  3. jquery ajax分页写法

    jquery ajax分页写法我用的是laypage插件 前端代码<pre> function demo(curr) { $.getJSON('/home/index/getinfo', ...

  4. 原生Ajax

    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...

  5. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  6. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

  7. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  8. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

  9. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

随机推荐

  1. 洛谷 P3381【模板】最小费用最大流

    题目描述 如题,给出一个网络图,以及其源点和汇点,每条边已知其最大流量和单位流量费用,求出其网络最大流和在最大流情况下的最小费用. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表 ...

  2. StyleSheet

    StyleSheet.create()方法 //定义组件 var App = React.createClass({ render:function () { return( <View sty ...

  3. COCO2018 目标检测

    刚浏览了一下coco数据集官网,认真看了一下18年的目标检测任务,简单记录一下. coco2018目标检测挑战赛只进行实例分割的评比,虽然仍然可以输出bbox,但是不可以提交到比赛的服务器,原因是官方 ...

  4. origin横纵坐标颠倒

    origin默认是只能多个纵坐标,不能多个横坐标,所以这种情况只能先作成多个Y,然后像这样exchange一下.

  5. POJ_1703 Find them, Catch them 【并查集】

    一.题面 POJ1703 二.分析 需要将并查集与矢量法则相结合.par数组用以记录父节点,rank用以记录与父节点的关系.如题意,有两种关系,设定0是属于同一个帮派,1表示不属于同一个帮派. 运用并 ...

  6. 【AC自动机】【树状数组】【dfs序】洛谷 P2414 [NOI2011]阿狸的打字机 题解

        这一题是对AC自动机的充分理解和树dfs序的巧妙运用. 题目背景 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机. 题目描述 打字机上只有28个按键,分别印有26个小写英文字母和' ...

  7. C# 有关系统音量的操作

    需要知道的 调音量是可以快捷键的,还可以用Winmm.dll,但是这个过于复杂了,还有左右声道,我们不需要这么复杂.还有个办法 https://stackoverflow.com/questions/ ...

  8. HihoCoder - 1044 状压DP 初步

    本题主要难在状态的转移 定义\(dp[i][j]:\)前\(i\)个中\(j\)集合范围内的最优解 \(j\)定义为\(p_1,p_2,...,p_{m-1}\),若第\(i-j+1\)个选定,则\( ...

  9. HDU - 1403 后缀数组初步

    题意:求两个串的最长公共子串 两个串连接起来然后求高度数组 注意两个sa值必须分别在不同一侧 本题是用来测试模板的,回想起青岛那次翻车感觉很糟糕 #include<iostream> #i ...

  10. 爬虫之自动生成url

    Object.extend=function(props){ //继承父类 var prototype=Object.create(this.prototype) //初始化函数ctor var _C ...