异步请求之同域名异步请求 ajax

最新推荐文章于 2022-09-06 22:32:08 发布

置顶起个名字真难啊啊啊啊啊

最新推荐文章于 2022-09-06 22:32:08 发布

阅读量1.2k

点赞数 1

分类专栏： ajax 异步 javascript 文章标签： ajax xmlhttprequest 服务器 action function javascript

本文链接：https://blog.csdn.net/li277680701/article/details/7282744

版权

javascript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

异步

4 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

今天上午在一qq群里大家让我讲点什么，聊着聊着讲到ajax，然后就有了本文

作者文笔极烂，上学时语文基本保持在及格分数线上下。所以有胡言乱语大家一笑而过不必当真，当然如果有不对的地方希望斧正

首先既然讲到异步请求我先讲讲我会的一些异步请求也是本文和接下来几篇文章的一个纲目吧

1、同域名异步请求 ajax（本文）

2、非同域名简单异步请求script标签

3、同域名异步文件上传iframe标签

4、非同域名异步上传文件iframe标签

所有的异步请求都可以认为是在浏览器开启了一个简易的小浏览器来向服务器发送post或者get请求来获取数据通过javascript 解析返回的数据完成后续的操作

ajax的定义在网上即可搜索到本文就不加赘述了。

ajax实际中经常用到的几点

1、创建一个ajax对象

2、ajax的状态改变事件onreadystatechange

3、ajax打开请求的方法open

4、ajax发送请求 send方法

要用ajax第一步创建ajax对象这里直接用的W3school中的代码

function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

此处没有什么好说的就是根据不同浏览器来获取ajax对象

xmlHttp=GetXmlHttpObject()

这样就获取到了ajax的对象放到xmlHttp变量里面

第二步

定义ajax的状态改变事件

xmlHttp.onreadystatechange=function(){
}

此处定义一个了ajax的状态改变事件来完成请求返回的操作

那么这里是需要判断的

因为状态改变事件会在任何状态改变的时候来调用这个方法

我们需要的是在请求完成并且成功的时候我们才做我们想要的操作

那么这里xmlHttp.readyState获取到的是请求的状态

这里的请求状态就像浏览器的请求分为（此处又引用了其他博客的文章原文已经找不到了）

0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

通过上面不难看出我们需要的是4这个状态

那么其实还需要一个判断也就是服务器响应过来的状态因为服务器响应的结果很有可能不是我们想要的

那么服务器响应的状态又哪些？http://baike.baidu.com/view/1790469.htm 百度百科里面已经列出来了

接下来我们需要判断服务器响应的状态是200的时候也就是响应的是成功的时候我们做我们需要做的事情

代码如下

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

在alert那里我们我们可以根据自己的需要来做一些自己的操作其中xmlHttp.responseText为服务器响应的数据

接下来就是打开应该请求和发送数据了

xmlHttp.open("GET",'1.txt',true);
xmlHttp.send(null);

首先一个最简单的请求

这里我们像1.txt发送了一个异步的ajax get请求

请求完成时会调用状态改变事件并且弹出1.txt里面的数据

这里的open是打开这个请求 send是像这个请求发送数据

open里面三个参数

第一个是post还是get

第二个是请求的路径

第三个是是否为异步请求 true的时候为异步

首先第一个参数 post和get这里需要注意的

下面写一个post发送的例子

xmlHttp.open("POST",'test.php?action=login',true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
xmlHttp.send("username=zhangsan");

此处有一点需要注意的而且容易出现混肴的地方

此处post提交时真正post提交过去的只有username而action依然是get提交

也就是在test.php我们可以这样获取数据

<?php
echo 'action='.$_GET['action'].'&username='.$_POST['username'];
?>

这里有点类似post表单提交

<form method="post" action="test.php?action=login">
<input type="text" name="username"/>
</form>

还有一点就是post提交的时候要在发送之前添加一句

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

这里是post提交必须的

第二个参数是提交的字符串此处没有特别要注意的

后面的第三个参数是是否为异步提交

这里大多数情况我们都需要为true 有些特殊的地方我们才用false

比如在注册的时候提交时验证用户名是否存在

那么就需要用到false

下面有个小例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}
var fsubmit = function(){
	issubmit = false;
	xmlHttp=GetXmlHttpObject()
	xmlHttp.onreadystatechange=function(){
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				if(xmlHttp.responseText=='0'){
					issubmit = true;
				}
			}
		}
	}
	xmlHttp.open("POST",'mytest.php?action=login',false);
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
	xmlHttp.send("username="+document.getElementById('username').value);
	return issubmit;
}
  //-->
  </SCRIPT>
 </HEAD>
 <BODY>
 <form method="post" action="test.php?action=login" οnsubmit="return fsubmit()">
<input type="text" name="username" id="username"/>
<input type="submit" value="提交" />
</form>
 </BODY>
</HTML>

test.php文件

<?php
if($_POST['username']=='zhangsan'){
	echo '1';
}else{
	echo '0';
}
?>

此处只要输入zhangsan就不能被提交如果输入的非张三就可以提交

需要注意的那里我标红了

如果第三个参数为true 那么永远不会被提交因为issubmit是false但是异步提交在返回false之后才会调用onreadystatechange事件里面所以永远都是返回的false

send方法里面的参数是提交的参数如果get提交的可以将open里面的第二个参数里面的?之后的放到此处提交效果一样

如果为post提交那么此处提交的为post数据

上面基本上给ajax提交的常用到的方法都讲完了剩下的是服务器的响应和具体的js操作这里就不浪费篇章来讲解了

起个名字真难啊啊啊啊啊

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
异步请求之同域名异步请求 ajax

今天上午在一qq群里大家让我讲点什么，聊着聊着讲到ajax，然后就有了本文作者文笔极烂，上学时语文基本保持在及格分数线上下。所以有胡言乱语大家一笑而过不必当真，当然如果有不对的地方希望斧正首先既然讲到异步请求我先讲讲我会的一些异步请求也是本文和接下来几篇文章的一个纲目吧1、同域名异步请求 ajax（本文）2、非同域名简单异步请求script标签3、同域名异步文件上传if
复制链接

扫一扫