Making a URL W3C valid AND work in Ajax Request

I have a generic function that returns URLs. (It's a plugin function that returns URLs to resources [images, stylesheets] within a plugin).

I use GET parameters in those URLs.

If I want to use these URLs within a HTML page, to pass W3C validation, I need to mask ampersands as &

/plugin.php?plugin=xyz&resource=stylesheet&....

but, if I want to use the URL as the "url" parameter for a AJAX call, the ampersand is not interpreted correctly, screwing up my calls.

Can I do something get & work in AJAX calls?

I would very much like to avoid adding parameters to th URL generating function (intendedUse="ajax" or 开发者_Go百科whatever) or manipulating the URL in Javascript, as this plugin model will be re-used many times (and possibly by many people) and I want it as simple as possible.

It seems to me that you're running into the problem of having one piece of your application cross multiple layers. In this case it's the plugin.

A URL as specified by RFC 1738 states that a URL should use a & token to separate key/value pairs from one another. However ampersand is a reserved token in HTML and therefore should be escaped into &. Since escaping the ampersands is an artifact of HTML, your plugin should probably not be escaping them directly. Instead you should have a function or something that escapes a canonical URL so that it can be embedded in HTML markup.

The only place that this is likely to actually happen is if you are:

• Using XHTML
• Serving it as text/html
• Using inline <script>

This is not a happy combination, and the solution is in the spec.

Use external scripts if your script uses < or & or ]]> or --.

The XHTML media types note includes the same advice, but also provides a workaround if you choose to ignore it.

Try returning JSON instead of just a string, that way your Javascript can read the URL value as an object, and you shouldn't have that issue. Other than that, try simply HTML decoding the string, using something like:

function escapeHTML (str)
{
   var div = document.createElement('div');
   var text = document.createTextNode(str);
   div.appendChild(text);
   return div.innerHTML;
}; 

Obviously you'll want to make sure you remove any reference to DOM elements you might create (which I've not done here to simplify the example).

I use this technique in the AJAX sites I create at my work and have used it many times to solve this problem.

When you have markup of the form:

<a href="?a=1&amp;b=2">

Then the value of the href attribute is ?a=1&b=2. The & is only an escape sequence in HTML/XML and doesn't affect the value of the attribute. This is similar to:

<a href="&lt;&gt;">

Where the value of the attribute is <>.

If, instead, you have code of the form:

<script>
var s = "?a=1&b=2";
</script>

Then you can use a JavaScript function:

<script>
var amp = String.fromCharCode(38);
var s = "?a=1"+amp+"b=2";
</script>

This allows code that would otherwise only be valid HTML or only valid XHTML to be valid in both. (See Dorwald's comments for more info.)