Ajax入门

原创 2018年04月17日 21:09:59

处理跨域的主要方法
1. JSONP
2. CORS
本文主要讨论CORS解决AJAX因为浏览器同源策略不能跨域请求数据的问题。


1. JSONP
JSONP跨域可以参考下面这篇博客
JSONP跨域


2. CORS
关于CORS细节可以阅读阮一峰的跨域资源共享 CORS 详解

跨域资源共享 CORS
1. 跨域资源共享CORS(Cross-origin resource sharing)

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而解决了AJAX不能跨域请求的问题。

  1. CORS需要浏览器和服务器同时支持。

    整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

    因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

    CORS允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。


AJAX简介
AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术)

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLHttpRequest对象是浏览器提供的一个API,用来顺畅地向服务器发送请求并解析服务器响应,当然整个过程中,浏览器页面不会被刷新。

创建AJAX步骤:

1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
兼容各个浏览器的创建方法

function createRequest (){
    try {
        xhr = new XMLHttpRequest();
    }catch (tryMS){
        try {
            xhr = new ActiveXObject("Msxm12.XMLHTTP");
        } catch (otherMS) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (failed) {
                xhr = null;
            }
        }
    }
    return xhr;
}

2.准备请求
xhr.open(method,url,async);
- open() 的第一个参数是HTTP请求方法 - 有GET,POST,HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母,否则其他一些浏览器(比如FireFox)可能无法处理这个请求。
- 第二个参数是要作为请求发送目标的URL。
- 第三个参数是true或false,表示请求是异步还是同步。true是异步,默认true。

3.发送请求
xhr.send();
send() 方法的参数可以是任何你想发送给服务器的内容

4.处理响应

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
    }
}
  1. onreadystatechange :当处理过程发生变化的时候执行下面的函数
  2. readyState状态值

    • 0:请求未初始化。
    • 1:正在加载) or (已建立服务器链接)
    • 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
    • 3:请求在处理中;
    • 4:响应已完成。
  3. responseText:服务器以文本字符的形式返回

  4. responseXML:获得 XML形式的响应数据

  5. 对象转换为JSON格式使用JSON.stringify

  6. json转换为对象格式用JSON.parse()

  7. 返回值一般为json字符串,可以用JSON.parse(xhr.responseText)转化为JSON对象


代码实现如下:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>  
    <button id="myButton">点我</button>
    <script src="./main.js"></script>
</body>
</html>

JS

myButton=document.getElementById('myButton')
myButton.addEventListener('click',(e)=>{
    let xhr=new XMLHttpRequest()
    xhr.onreadystatechange=()=>{
       if( xhr.readyState===4){
           console.log("请求响应都完毕了")
           if( xhr.status>=200&& xhr.status<300){
               console.log("请求成功")
               console.log(typeof  xhr.responseText)//判断返回数据的类型是String
               console.log( xhr.responseText)
               let string= xhr.responseText
               let object=window.JSON.parse(string)
               console.log(typeof object)
               console.log(object)
           }else if( xhr.status>=400){
               console.log("请求失败")
           }
       }
    }
    xhr.open('GET','/xxx')
    xhr.send()
})
 if(path==='/xxx'){
    response.statusCode=200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.write(`
    {
      "note":{
        "to":"xxx",
        "from":"yyy",
        "content":"hello"
      }
    }
    `)
    response.end()
  }

当发送请求的时候,就会根据xml.open('GET','/xxx')找到对应的请求路径。在本文是找到/xxx路径,然后返回所请求的数据,在浏览器运行结果如下。


CORS跨域
关于CORS细节可以阅读阮一峰的跨域资源共享 CORS 详解

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>  
    <button id="myButton">点我</button>
     <script src="./main.js"></script>
</body>
</html>

JS

myButton.addEventListener('click',(e)=>{
    let xhr=new XMLHttpRequest()
    xhr.open('GET','http://jack.com:8002/xxx')
    xhr.onreadystatechange=()=>{
       if(xhr.readyState===4){
           console.log("请求响应都完毕了")
           if(xhr.status>=200&&xhr.status<300){
               console.log("请求成功")
               console.log(typeof xhr.responseText)
               console.log(xhr.responseText)
               let string=xhr.responseText
               let object=window.JSON.parse(string)
               console.log(typeof object)
               console.log(object)
           }else if(xhr.status>=400){
               console.log("请求失败")
           }
       }
    }
    xhr.send()
})
if(path==='/xxx'){
    response.statusCode=200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')
    response.write(`
    {
      "note":{
        "to":"xxx",
        "from":"yyy",
        "content":"hello"
      }
    }
    `)
    response.end()
  }

可以看到当代码没有下面这一行代码时AJAX并不能跨域请求response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')的时候,结果如下

从结果可以看出,因为浏览器的同源策略,AJAX不能跨域请求

解决的办法是添加response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')

源码下载


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hqf2018/article/details/79980873

ajax从入门到深入精通

ajax从入门到精通;ajax进度条;ajax跨越;ajax提交表单;ajax中模拟get、post请求;...
  • hsd2012
  • hsd2012
  • 2016-04-14 16:44:20
  • 8118

AJAX入门这一篇就够了

什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的...
  • Java_3y
  • Java_3y
  • 2018-02-13 22:40:16
  • 123

第一个 Ajax 入门实例

http://blog.csdn.net/liruxing1715/article/details/7104404                   Ajax    ...
  • kouwoo
  • kouwoo
  • 2014-10-27 17:26:18
  • 585

ajax入门是初学者的宝典

  • 2008年10月30日 15:38
  • 27KB
  • 下载

Ajax入门Ajax入门

  • 2009年04月19日 11:47
  • 55KB
  • 下载

ajax入门 不要畏惧 很简单 进了门一切都好学多了

以前总是听别人说ajax是多么的好,然后自己就去借了本书看,哇塞感觉好难哦,什么介绍JavaScript,html,css,还有很多一些东西。看的那个难啊,然后就是硬着头皮把它给看完了,但是就是缺少了...
  • y75475
  • y75475
  • 2017-04-28 17:37:44
  • 1767

ajax 入门资料

  • 2011年09月14日 15:54
  • 1.23MB
  • 下载

Ajax程序设计入门

  • 2011年10月10日 17:00
  • 205KB
  • 下载

Ajax和Jquery基础入门视频

  • 2018年01月11日 14:41
  • 919B
  • 下载

Ajax完全入门Ajax完全入门

  • 2011年04月11日 20:38
  • 2.58MB
  • 下载
收藏助手
不良信息举报
您举报文章:Ajax入门
举报原因:
原因补充:

(最多只允许输入30个字)