非常简单的Ajax请求实例附源码 - 网站

非常简单的Ajax请求实例附源码

分类:js_jQuery答疑 - 常见问题 · 发布时间:2021-11-16 17:02 · 阅读:2819

这篇文章为大家推荐了一个非常简单的Ajax请求实例,可以在不重载页面的情况与 Web 服务器交换数据,感兴趣的小伙伴们可以参考一下

Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。通过Ajax,您可以使用 JavaScript的XMLHttpRequest对象来直接与服务器进行通信。您可以在不重载页面的情况与 Web 服务器交换数据。在本文的例子中,我们将演示当用户向一个标准的HTML表单中输入数据时网页如何与web服务器进行通信。

   简单的Ajax请求 

输入你的名字,性别,生日:

名字:
性别:
生日:



服务器响应内容:

下面来详细说明每个JS函数的功能。
createXMLHttpRequest() 用来创建XMLHttpRequest对象。
因为IE把XMLHttpRequest实现为一个ActiveX对象,其他浏览器(FF/Safari/Opera)把它实现为一个本地JavaScript对象。由于存在这些差别,JavaScript代码中必须包含有关的逻辑。
createQueryString() 用来整理参数,将Ajax请求要传递的参数整理成一定的格式。
如果传递中文或非ASCII字符必须进行URL编码,本例使用JS的encodeURIComponent()函数进行参数URL编码。
doRequestUsingGET() 以HTTP GET方式向服务器发送请求,并且传递参数。
XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数:一个是指示所使用的方法(通常是GET或POST)的串;一个是表示目标资源URL的串;一个是Boolean值,只是请求是否是异步的。
GET请求时,将传递的参数写到open方法的url参数中,此时send方法的参数为null。
在某些情况下,有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同,这就会带来不好的结果,把当前时间戳追加到URL的最后,就能确保URL的惟一性,从而避免浏览器缓存结果。
本例服务器端代码使用的是asp.net(c#)。
doRequestUsingPOST() 以HTTP POST方式向服务器发送请求,并且传递参数。
确保open()中指定的方法是POST,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。设置头信息前必须先调用open方法。
必须使用send方法传递参数。参数的提交格式和GET方法中url的写法一样。
handleStateChange()  Ajax回调函数。
对于XMLHttpRequest对象,onreadystatechange属性存储了回调函数的指针。当XMLHttpRequest对象内部状态发生变化时,就会调用这个回调函数。
parseResults() 处理响应结果。

以上就是一个很简单的Ajax请求实例,欢迎大家学习,下载Ajax请求实例

标签:
ajax 请求

相关文章

AJAX乱码与异步同步以及封装jQuery库实现步骤详解

这篇文章主要介绍了异步通信技术AJAX乱码问题、异步与同步、手动封装一个jQuery库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

AJAX的跨域问题解决方案

跨域简单的说,就是从一个域名的网页去访问另一个域名网页的资源,下面这篇文章主要给大家介绍了关于AJAX的跨域问题解决的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

利用Ajax实现智能回答的机器人示例代码

这篇文章主要介绍了利用Ajax实现智能回答的机器人,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

ajax、axios和fetch之间优缺点重点对比总结

今天被问到用没用过ajax axios,我回答经常用axios,但ajax用的比较少,下面这篇文章主要给大家介绍了关于ajax、axios和fetch之间优缺点重点对比总结的相关资料,需要的朋友可以参考下

如何通过axios发起Ajax请求(最新推荐)

Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请求,这篇文章主要介绍了如何通过axios发起Ajax请求,需要的朋友可以参考下

返回分类 返回首页