ajax冲刺03
---恢复内容开始---
1、jq中ajax封装
简单的$.ajax方法使用示例：请关注 传参类型及数据
<!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>
<script src="./jquery-3.3.1.min.js"></script>
<script>
window.onload=()=>{ $('#btn')[0].onclick=function(){
var code=$('#code')[0].value
// console.log('cc')
$.ajax({
type:'post',
// url:'../ajax/backend.php?code='+code,
url:'../ajax/backend.php',//根据data自动拼接
data:{code:code},
dataType:'json',//xml/text/html/script/jsonp
success:function(data){
var info=$('#info')[0]
if(data.flag==0){
info.innerHTML='没有这本书'
}
else{
var tag='<ul><li>价格：'+data.price+'</li><li>作者：'+data.author+'</li></ul>'
info.innerHTML=tag
}
}
})
}
}
</script>
<style>
#container {
width: 360px;
min-height: 100px;
background-color: beige;
position: absolute;
left: 50%;
top: 10px;
margin-left: -180px;
}
</style>
</head> <body>
<div id="container">
<div>
图书编码：<input type="text" name="code" id="code">
<input type="button" value="query" id="btn">
</div>
<div id="info"></div> </div>
</body> </html>
2、ajax API
$.ajax中也可以传错误的回调：
3、$.ajax自行封装
function ajax(obj) {
//默认参数
var defaults = {
type: 'get',
data: {},
url: '#',
dataType: 'text',
async: true,
success: function (data) {
console.log(data)
}
}
//处理形参，进行覆盖
for (let key in obj) {
defaults[key] = obj[key]
}
//创建对象
var xhr = null
//兼容处理
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//把对象形式对的参数转换为字符串形式的参数
var param = ''
for (let attr in obj.data) {
param += attr + '=' + obj.data[attr] + '&'
}
if (param) {
param = param.substring(0, param.length - 1)
}
//处理get请求参数及中文乱码问题
if (defaults.type === 'get') {
defaults.url += '?' + encodeURI(param)
}
//准备发送，设置发送的参数
xhr.open(defaults.type, defaults.url, defaults.async)
//处理post请求并设置请求头
var data=null
if(defaults.type==='post'){
data=param
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded")
}
xhr.send(data)
//处理同步情求，不执行回调函数
if(defaults.async){
return xhr.responseText//不用传回调函数
}
//设置回调函数
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = xhr.responseText
if(defaults.dataType=='json'){
data=JSON.parse(data)
}
obj.success(data)
// console.log('ok')
}
}
}
}
4、ajax跨域
1)
跨域是非常常见的
2）一般解决方案:jsonp
开发接口简单，不存在兼容性问题
其他方案有：
3）跨域报错
拦截跨源请求：同源策略禁止读取位于 http://over.com/data.php 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）
Failed to load http://over.com/data.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
---恢复内容结束---
1、jq中ajax封装
简单的$.ajax方法使用示例：请关注 传参类型及数据
<!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>
<script src="./jquery-3.3.1.min.js"></script>
<script>
window.onload=()=>{ $('#btn')[0].onclick=function(){
var code=$('#code')[0].value
// console.log('cc')
$.ajax({
type:'post',
// url:'../ajax/backend.php?code='+code,
url:'../ajax/backend.php',//根据data自动拼接
data:{code:code},
dataType:'json',//xml/text/html/script/jsonp
success:function(data){
var info=$('#info')[0]
if(data.flag==0){
info.innerHTML='没有这本书'
}
else{
var tag='<ul><li>价格：'+data.price+'</li><li>作者：'+data.author+'</li></ul>'
info.innerHTML=tag
}
}
})
}
}
</script>
<style>
#container {
width: 360px;
min-height: 100px;
background-color: beige;
position: absolute;
left: 50%;
top: 10px;
margin-left: -180px;
}
</style>
</head> <body>
<div id="container">
<div>
图书编码：<input type="text" name="code" id="code">
<input type="button" value="query" id="btn">
</div>
<div id="info"></div> </div>
</body> </html>
2、ajax API
$.ajax中也可以传错误的回调：
3、$.ajax自行封装
function ajax(obj) {
//默认参数
var defaults = {
type: 'get',
data: {},
url: '#',
dataType: 'text',
async: true,
success: function (data) {
console.log(data)
}
}
//处理形参，进行覆盖
for (let key in obj) {
defaults[key] = obj[key]
}
//创建对象
var xhr = null
//兼容处理
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//把对象形式对的参数转换为字符串形式的参数
var param = ''
for (let attr in obj.data) {
param += attr + '=' + obj.data[attr] + '&'
}
if (param) {
param = param.substring(0, param.length - 1)
}
//处理get请求参数及中文乱码问题
if (defaults.type === 'get') {
defaults.url += '?' + encodeURI(param)
}
//准备发送，设置发送的参数
xhr.open(defaults.type, defaults.url, defaults.async)
//处理post请求并设置请求头
var data=null
if(defaults.type==='post'){
data=param
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded")
}
xhr.send(data)
//处理同步情求，不执行回调函数
if(defaults.async){
return xhr.responseText//不用传回调函数
}
//设置回调函数
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = xhr.responseText
if(defaults.dataType=='json'){
data=JSON.parse(data)
}
obj.success(data)
// console.log('ok')
}
}
}
}
4、ajax跨域
1)
跨域是非常常见的
2）一般解决方案:jsonp
开发接口简单，不存在兼容性问题
其他方案有：
拦截跨源请求：同源策略禁止读取位于 http://over.com/data.php 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）
3）jsonp原理解析：
①静态script标签的 src属性进行跨域请求（不常用）
如果返回的是纯数据，无法通过js获取响应的数据（如 echo '123'）
可以请求js文件也可以请求php文件。不利于url传参，必须保证加载的顺序
标签内加asnyc属性后将无法获得响应数据,是异步加载。默认
情况下时同步加载
<!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>
<script src="http://over.com/data.php"></script>
<script>
console.log(data)
</script>
</head>
<body>
<h1>你好</h1>
</body>
</html>
②动态创建script标签，通过标签的src属性发送请求
异步的
jsonp的本质：通过jsonp访问一个url地址，所返回的内容是一个函数调用，并且通过函数调用
传递一些参数
<?php
$arr=array("name"=>"cc","age"=>"14");
echo 'foo('.json_encode($arr).')';
?>
<!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>
<script src="../jq/jquery-3.3.1.min.js"></script>
<script>
var script=document.createElement('script')
script.src='http://over.com/data.php'
var head=$('head')[0]
head.appendChild(script)
function foo(data){
console.log(data)
}
</script>
</head> <body>
<h1>你好</h1>
</body> </html>
上述代码中foo必须写死，不太灵活
下面改进：
<!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>
<script src="../jq/jquery-3.3.1.min.js"></script>
<script>
var script=document.createElement('script')
script.src='http://over.com/data.php?callback=func'
var head=$('head')[0]
head.appendChild(script)
function func(data){
console.log(data)
}
</script>
</head> <body>
<h1>你好</h1>
</body> </html>
4、jq解决跨域问题
$.ajax仍然支持跨域
经常会发生即使状态码是200也不能进入正确回调函数的情况
<?php
$cb=$_GET['cb'];
echo $cb.'('.'"hello"'.')';
?>
<!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>
<script src="../ajax/ajax.js"></script>
<script src="../jq/jquery-3.3.1.min.js"></script>
<script>
var my$=(id)=>{
return document.getElementById(id)
}
$(()=>{
my$('btn').addEventListener('click',()=>{
$.ajax({
type:'get',
dataType:'jsonp',
jsonp:'cb',//自定义参数名字(默认callback),
//这里的名字指的是等号前面的键，后端根据这个键获取方法名
jsonpCallback:'abc',//这个值是自定义回调函数的名字，就是=后面的值
url:'http://over.com/data.php',
success:(data)=>{
console.log(data)
}
})
}
)
})
</script>
</head> <body>
<input type="button" id="btn" value="submit">
</body> </html>
5、兼容一般处理与跨域的自封装ajax方法
function ajax(obj) {
// 默认参数
var defaults = {
type: 'get',
data: {},
url: '#',
dataType: 'text',
async: true,
success: function (data) {
console.log(data)
}
}
// 处理形参，传递参数的时候就覆盖默认参数，不传递就使用默认参数
for (var key in obj) {
defaults[key] = obj[key];
}
if (defaults.dataType == 'jsonp') {
ajax4jsonp(defaults)
} else {
ajax4json(defaults)
}
function ajax4json(defaults) {
// 1、创建XMLHttpRequest对象
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 把对象形式的参数转化为字符串形式的参数
/*
{username:'zhangsan','password':123}
转换为
username=zhangsan&password=123
*/
var param = '';
for (var attr in obj.data) {
param += attr + '=' + obj.data[attr] + '&';
}
if (param) {
param = param.substring(0, param.length - 1);
}
// 处理get请求参数并且处理中文乱码问题
if (defaults.type == 'get') {
defaults.url += '?' + encodeURI(param);
}
// 2、准备发送（设置发送的参数）
xhr.open(defaults.type, defaults.url, defaults.async);
// 处理post请求参数并且设置请求头信息（必须设置）
var data = null;
if (defaults.type == 'post') {
data = param;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
// 3、执行发送动作
xhr.send(data);
// 处理同步请求，不会调用回调函数
if (!defaults.async) {
if (defaults.dataType == 'json') {
return JSON.parse(xhr.responseText);
} else {
return xhr.responseText;
}
}
// 4、指定回调函数（处理服务器响应数据）
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
if (defaults.dataType == 'json') {
// data = eval("("+ data +")");
data = JSON.parse(data);
}
defaults.success(data);
}
}
}
}
}
function ajax4jsonp(defaults) {
var param = ''
for (var attr in defaults.data) {
param += attr + "=" + defaults.data[attr] + '&'
}
if (param) {
param = param.substring(0, param.length - 1)
param = '&' + param
}
var cbName = "jQuery" + ("3.3.1" + Math.random()).replace(/\D/g, "") + '_' + (new Date().getTime())
if (defaults.jsonpCallback) {
console.log('ok')
cbName = defaults.jsonpCallback
}
//回调函数
window[cbName] = function (data) {
defaults.success(data)
}
var script = doc.createElement('script')
script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param
var head=document.getElementsByTagName('head')[0]
head.appendChild(script)
}
8、搜索联想案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#container{
width: 400px;
min-height: 300px;
background-color: lightgreen;
margin: auto;
text-align: center;
padding: 10px;
}
#container ul{
margin: 0;
}
#container li{
list-style: none;
background-color: lightGray;
text-align: left;
padding-left: 45px;
height: 25px;
line-height: 25px;
cursor: pointer; }
</style>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#keyword").keyup(function(){
var kw = $(this).val();
$.ajax({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
jsonp:'cb',
data:{wd:kw},
dataType:'jsonp',
success:function(data){
var sug = data.s;
var tag = '<ul>';
$.each(sug,function(i,e){
tag += '<li>'+e+'</li>';
});
tag += '</ul>';
$("#info").html(tag);
$("#info").find('li').hover(function(){
$(this).css('backgroundColor','lightblue');
},function(){
$(this).css('backgroundColor','lightgray');
});
}
});
});
});
</script>
</head>
<body>
<div id="container">
<input type="text" name="keyword" id="keyword">
<input type="button" value="搜索" id="query">
<div id="info"></div>
</div>
</body>
</html>
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
readyState
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
ajax冲刺03的更多相关文章
- Ajax全解
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 我们先来看一些简单的方法,这些方法都是对jQuery.ajax( ...
- MSCRM 通过Ajax调用WCF服务
Call WCF Service from Dynamics CRM using AJAX A couple of days back, I had one of my ex-colleagues c ...
- 黑马eesy_15 Vue：03.生命周期与ajax异步请求
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...
- Ajax的封装03
一.Ajax 1.原理:基于http协议的 内置对象:XMLHttpRequest 发起请求 那会相应 步骤: var xhr=new XMLHttpRequest(); // 请 ...
- no-jquery 03 Ajax
Ajax Requests GETting var xhr = new XMLHttpRequest(); xhr.open('GET', encodeURI('myservice/username? ...
- PHP. 03 .ajax传输XML、 ajax传输json、封装
XML简介 XML 指可扩展标记语言 EXtensible Markup Language .射击的时候是用来船体数据的,虽然格式跟HTML类似 xml示例 <?xml version=&quo ...
- 2019.03.24 Ajax
也还是会用到jquery中的Ajax请i求 所以第一还是引入jQuery包 可以去网上搜腾讯网静态资源库 然后引入包 Ajax还是异步处理 处理堵塞问题 import time 就可以了 ...
- 【03】AJAX 向服务器发送请求
AJAX 向服务器发送请求 创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...
- 第03组 Beta冲刺（1/4）
队名:不等式方程组 组长博客 作业博客 团队项目进度 组员一:张逸杰(组长) 过去两天完成的任务: 文字/口头描述: 制定了初步的项目计划,并开始学习一些推荐.搜索类算法 GitHub签入纪录: 暂无 ...
随机推荐
- 【译】理解JavaScript中的柯里化
译文开始 函数式编程是一种编程风格,这种编程风格就是试图将传递函数作为参数(即将作为回调函数)和返回一个函数,但没有函数副作用(函数副作用即会改变程序的状态). 有很多语言采用这种编程风格,其中包括J ...
- ASP.NET Core 2.0 新功能汇总
前言 ASP.NET Core 的变化和发展速度是飞快的,当你发现你还没有掌握 ASP.NET Core 1.0 的时候, 2.0 已经快要发布了,目前 2.0 处于 Preview 1 版本,意味着 ...
- MySQL主从数据同步延时分析
一.MySQL数据库主从同步延迟 要了解MySQL数据库主从同步延迟原理,我们 ...
- 【转】Android 模拟器横屏竖屏切换设置
http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04 来源:设计与开发 ...
- Flink的广播变量
Flink支持广播变量,就是将数据广播到具体的taskmanager上,数据存储在内存中,这样可以减缓大量的shuffle操作: 比如在数据join阶段,不可避免的就是大量的shuffle操作,我们可 ...
- Fiddler教程--简介
1.开发环境host配置 自己修改系统的host来回挺麻烦的 2.前后的接口调试 3.线上bugfix 4.性能分析和优化 5.等等... 工作原理 一个代理服务器 地址改为 127.0.0.1:88 ...
- BZOJ2120 数颜色 莫队 带修莫队
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ2120.html 题目传送门 - BZOJ2120 题意 给定一个长度为 $n$ 的序列 $a$ ,有 ...
- Linux下C语言的socket网络编程
关于详细的服务器建立的步骤以及相关的socket套接字的知识我已经在python socket编程的文章中提到过了,大家可以参看那一篇博客来历接socket套接字编程的内容,由于要是用C相关的API所 ...
- NN：神经网络算法进阶优化法，进一步提高手写数字识别的准确率—Jason niu
上一篇文章,比较了三种算法实现对手写数字识别,其中,SVM和神经网络算法表现非常好准确率都在90%以上,本文章进一步探讨对神经网络算法优化,进一步提高准确率,通过测试发现,准确率提高了很多. 首先,改 ...
- 【python】异步IO
No1: 协程看上去也是子程序,但执行过程中,在子程序内部可中断,然后转而执行别的子程序,在适当的时候再返回来接着执行. 优势: 1.最大的优势就是协程极高的执行效率.因为子程序切换不是线程切换,而是 ...