简单AJAX请求JSon数据

Ajax 全名为Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

它是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

在传统方法中,当我们需要向服务器请求数据时,浏览器需要等待该请求完成之后才能够进行下一步的操作,而在此之前是不能够对网页进行其他的操作,如果因请求的数据过大或者网络延迟等原因而造成的等待服务器响应的时间过久,无疑会使得用户的体验感降低,甚至有可能直接导致程序挂起。

而如果我们采用AJax技术,则可以避免这种情况的发生,对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

通过 AJAX,JavaScript 无需等待服务器的响应,而是:

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

XMLHttpRequest 是 AJAX 的基础。 

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

创建 XMLHttpRequest 对象的语法:

var iable=new XMLHttpRequest();

老版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:

var iable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

向服务器发送请求:

我们可以利用XMLHttpRequest的open(method,url,async)和send(string)方法向服务器发送请求。

其中open的三个参数分别是:规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST

GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

        • 无法使用缓存文件(更新服务器上的文件或数据库)
        • 向服务器发送大量数据(POST 没有数据量限制)
        • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
//示例代码//get
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
//post
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//为了能够像表单那样操作,需使用setRequestHeader方法
xmlhttp.send("fname=Bill&lname=Gates")//字符串只能用于post
  • url:文件在服务器上的位置,请求的服务器地址
  • async:true(异步)或 false(同步)

send的string则是只能用于post。

完整示例代码(访问Yahoo的天气API,查看返回的JSON数据):

// 实例化异步请求对象
var xhr = new XMLHttpRequest();
// 监听状态
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {//状态码200 -> ok
            var result = JSON.parse(xhr.responseText);
            console.log(result);
        }
    }
}
// 初始化请求
xhr.open(‘GET‘, ‘https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20%3D%202151330&format=json‘, true);
// 发送请求
xhr.send();
时间: 2024-08-27 23:56:48

简单AJAX请求JSon数据的相关文章

ajax请求json数据异常:nested exception is net.sf.json.JSONException: java.lang.reflect.InvocationTargetException] with root cause

ajax请求json数据异常:nested exception is net.sf.json.JSONException: java.lang.reflect.InvocationTargetException] with root cause 1.异常原因:所请求的json数据中包含java.util.date数据类型,但是在后台并没有将其格式转换 2.解决方法:添加工具类DateJsonValueProcessor import java.text.SimpleDateFormat; imp

Ajax请求json数据

同域请求json数据 客户端js代码: <script> $.ajax({ url: 'http://127.0.0.2/index.php', type: 'GET', dataType: 'json', data: {ac: 'xcajax',at: 'goodslist'}, success: function(json){ $.each(json,function(i){ console.log(json[i].title); }) } }); </script> 服务端端

原生ajax请求json数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="bt1">点击获取json数据</button> <script type="text

ajax请求json数据案例

今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class="conSixmap"> <div class="name conmap01" data-name="beimeizhou"> <a href="javascript:void(0)">北美洲</

浅析ajax请求json数据并用js解析 [转]

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="js/jq

Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据)

form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multipart/form-data"> {# 这里必须要请求头格式才能把上传文件的对象传过去 enctype="multipart/form-data"#} 姓名 <input type="text" name="user">

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法:Js代码 jQuery.get

ajax获取json数据及实现跨域请求

最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口分割线 Begin-------------------------------------------------------------------------------------------------- 电商接口 淘宝商品搜索建议: http://suggest.taobao.com/s

ajax 发送json数据时为什么需要设置contentType: &quot;application/json”

1. ajax发送json数据时设置contentType: "application/json"和不设置时到底有什么区别? contentType: "application/json",首先明确一点,这也是一种文本类型(和text/json一样),表示json格式的字符串,如果ajax中设置为该类型,则发送的json对象必须要使用JSON.stringify进行序列化成字符串才能和设定的这个类型匹配.同时,对应的后端如果使用了Spring,接收时需要使用@Req